질문 : CSS 폭발 관리
작업중인 웹 사이트에서 CSS에 크게 의존하고 있습니다. 지금은 모든 CSS 스타일이 태그별로 적용되고 있으므로 향후 변경에 도움이되도록 더 많은 외부 스타일로 옮기려고합니다.
그러나 이제 문제는 내가 "CSS 폭발"을 받고 있음을 알아 차렸다는 것입니다. CSS 파일 내에서 데이터를 가장 잘 구성하고 추상화하는 방법을 결정하는 것이 점점 어려워지고 있습니다.
나는 테이블 기반 웹 사이트에서 이동하여 웹 사이트 내에서 div 태그를 사용하고 있습니다. 그래서 다음과 같은 CSS 선택기를 많이 얻었습니다.
div.title {
background-color: blue;
color: white;
text-align: center;
}
div.footer {
/* Styles Here */
}
div.body {
/* Styles Here */
}
/* And many more */아직 나쁘지는 않지만 초보자이기 때문에 CSS 파일의 다양한 부분을 가장 잘 구성하는 방법에 대한 권장 사항을 만들 수 있는지 궁금합니다. 내 웹 사이트의 모든 요소에 대해 별도의 CSS 속성을 갖고 싶지는 않으며 항상 CSS 파일이 상당히 직관적이고 읽기 쉽기를 원합니다.
저의 궁극적 인 목표는 CSS 파일을 쉽게 사용하고 웹 개발 속도를 높이는 힘을 보여주는 것입니다. 이렇게하면 앞으로이 사이트에서 작업 할 수있는 다른 사람들도 내가했던 방식을 선택하지 않고 좋은 코딩 관행을 사용하는 연습을 할 수 있습니다.
답변
이것은 아주 좋은 질문입니다. 내가 보는 모든 곳에서 CSS 파일은 시간이 지나면 제어 할 수없는 경향이 있습니다. 특히 팀에서 작업 할 때 특히 그렇습니다.
다음은 내가 준수하려는 규칙입니다 (항상 관리하는 것은 아닙니다.)
- 일찍 리팩토링하고 자주 리팩터링하십시오. CSS 파일을 자주 정리하고 동일한 클래스의 여러 정의를 통합합니다. 사용되지 않는 정의를 즉시 제거하십시오.
- 버그를 수정하는 동안 CSS를 추가 할 때 변경 사항에 대한 의견을 남겨주세요 ( "IE <7에서 상자가 정렬되어 있는지 확인하기위한 것입니다").
- 중복을 피하십시오 (예
.classname및.classname:hover에서 동일한 것을 정의). - 주석
/** Head **/를 사용하여 명확한 구조를 만드세요. - 일정한 스타일을 유지하는 데 도움이되는 prettifier 도구를 사용하십시오. 나는 Polystyle을 사용하는데, 그것과 함께 꽤 기쁩니다 ($ 15의 비용이 들지만 돈을 잘 썼습니다). 무료로 제공되는 것도 있습니다 (예 : 오픈 소스 도구 인 CSS Tidy 기반의 Code Beautifier).
- 합리적인 수업을 만드십시오. 이에 대한 몇 가지 참고 사항은 아래를 참조하십시오.
- 의미론을 사용하고 DIV 수프를 피하십시오-예를 들어 메뉴에는
<ul> - 가능한 한 낮은 수준에서 모든 것을 정의하고 (예 : 기본 글꼴 패밀리,
body색상 및 크기)inherit사용하십시오. - CSS가 매우 복잡한 경우 CSS 사전 컴파일러가 도움이 될 수 있습니다. 곧 같은 이유로 xCSS 를 조사 할 계획입니다. 주변에 여러 가지가 있습니다.
- 팀으로 작업하는 경우 CSS 파일에 대한 품질 및 표준의 필요성도 강조하십시오. 모든 사람들은 프로그래밍 언어로 코딩 표준을 좋아하지만 이것이 CSS에도 필요하다는 인식은 거의 없습니다.
- 팀에서 작업하는 경우, 버전 컨트롤 사용을 고려 않습니다. 추적하기가 훨씬 쉬워지고 충돌을 훨씬 쉽게 해결할 수 있습니다. HTML과 CSS에 "그냥"빠져 있더라도 그만한 가치가 있습니다.
!important와 함께 작동하지 마십시오. IE = <7이 처리 할 수 없기 때문이 아닙니다. 복잡한 구조에서!important를 사용하면 소스를 찾을 수없는 동작을 변경하려는 유혹이 자주 발생하지만 장기적인 유지 관리에는 독이됩니다.
합리적인 수업 만들기
이것이 내가 합리적인 수업을 만드는 방법입니다.
먼저 전역 설정을 적용합니다.
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }그런 다음 페이지 레이아웃의 주요 섹션 (예 : 상단 영역, 메뉴, 콘텐츠 및 바닥 글)을 식별합니다. 좋은 마크 업을 작성했다면이 영역은 HTML 구조와 동일 할 것입니다.
그런 다음 CSS 클래스를 작성하고 가능한 한 많은 조상을 지정하고 관련 클래스를 가능한 한 가깝게 그룹화합니다.
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber전체 CSS 구조를 루트에서 멀어 질수록 점점 더 구체적인 정의가 있는 트리로 생각하십시오. 수업 수를 가능한 한 적게 유지하고 가능한 한 드물게 반복하고 싶습니다.
예를 들어, 세 가지 수준의 탐색 메뉴가 있다고 가정 해 보겠습니다. 이 세 가지 메뉴는 다르게 보이지만 특정 특성도 공유합니다. 예를 들어, 모두 <ul> 이고 모두 동일한 글꼴 크기를 가지며 항목은 모두 서로 옆에 있습니다 ( ul 의 기본 렌더링과 반대). 또한 메뉴에는 글 머리 기호 ( list-style-type )가 없습니다.
먼저 menu 라는 클래스에서 공통 특성을 정의합니다.
div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }그런 다음 세 가지 메뉴 각각의 특정 특성을 정의하십시오. 레벨 1은 높이가 40 픽셀입니다. 레벨 2 및 3, 20 픽셀.
참고 :이를 위해 여러 클래스를 사용할 수도 있지만 Internet Explorer 6 에는 여러 클래스에 문제가 있으므로이 id 를 사용합니다.
div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }메뉴의 마크 업은 다음과 같습니다.
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>페이지에이 세 가지 메뉴와 같이 의미 상 유사한 요소가있는 경우 먼저 공통점을 찾아서 클래스에 넣으십시오. 그런 다음 특정 속성을 찾아서 클래스에 적용하거나 Internet Explorer 6을 지원해야하는 경우 ID를 적용합니다.
기타 HTML 팁
이러한 의미를 HTML 출력에 추가하면 디자이너는 나중에 순수한 CSS를 사용하여 웹 사이트 및 / 또는 앱의 모양을 사용자 정의 할 수 있으므로 시간을 크게 절약 할 수 있습니다.
- 가능하면 모든 페이지의 본문에 고유 한 클래스를 지정하십시오.
<body class='contactpage'>이렇게하면 스타일 시트에 페이지 별 조정을 매우 쉽게 추가 할 수 있습니다.body.contactpage div.container ul.mainmenu li { color: green } - 메뉴를 자동으로 빌드 할 때 나중에 광범위한 스타일을 허용 할 수 있도록 가능한 한 많은 CSS 컨텍스트를 추가하십시오. 예를 들면 :
이런 식으로 모든 메뉴 항목은 의미 컨텍스트에 따라 스타일링을 위해 액세스 할 수 있습니다. 목록의 첫 번째 항목이든 마지막 항목이든; 현재 활성화 된 항목인지 여부. 그리고 숫자로.<ul class="mainmenu"> <li class="item_first item_active item_1"> First item </li> <li class="item_2"> Second item </li> <li class="item_3"> Third item </li> <li class="item_last item_4"> Fourth item </li> </ul>
예제에 설명 된대로 여러 클래스의 할당이 위의 것을 참고 IE6에서 제대로 작동하지 않습니다 . IE6에서 여러 클래스를 처리 할 수 있도록하는 해결 방법이 있습니다. 해결 방법이 옵션이 아닌 경우 가장 중요한 클래스 (항목 번호, 활성 또는 처음 / 마지막)를 설정하거나 ID 사용에 의존해야합니다.
출처 : https://stackoverflow.com/questions/2253110/managing-css-explosion
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| AngularJS : Initialize service with asynchronous data (0) | 2021.09.16 |
|---|---|
| CSS를 사용하여 체크박스 크기를 변경하는 방법 (0) | 2021.09.16 |
| AngularJS의 ng-options를 사용하여 선택 작업 (0) | 2021.09.15 |
| CSS 클래스 이름 / 선택기에서 사용할 수 있는 특수문자 (0) | 2021.09.15 |
| 특정 텍스트를 포함하는 요소에 대한 CSS 선택기 (0) | 2021.09.15 |