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>예를 들어 메뉴에는 s를 사용하십시오 .가능한 한 낮은 수준에서 모든 것을 정의하고 (예 :의 기본 글꼴 패밀리, 색상 및 크기
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 에는 여러 클래스에 문제가 있으므로이 예제에서는 ids.
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에서 여러 클래스를 처리 할 수 있도록 하는 해결 방법 이 있습니다. 나는 아직 그것을 시도하지 않았지만 Dean Edwards에서 오는 매우 유망 해 보입니다. 그때까지 가장 중요한 클래스 (항목 번호, 활성 또는 첫 번째 / 마지막)를 설정하거나 ID 사용에 의존해야합니다. (부오 IE6!)
다음은 4 가지 예입니다.
- CSS 규약 / 코드 레이아웃 모델
- 첫 번째 스타일 시트를 작성할 때 따라야 할 CSS 표준이 있습니까?
- CSS를 정리하는 가장 좋은 방법은 무엇입니까?
- 모범 사례-CSS 스타일 시트 서식
4 모두에서 내 대답에는 Natalie Downe의 PDF CSS 시스템 을 다운로드하고 읽는 조언이 포함되어 있습니다. (PDF에는 슬라이드에없는 수많은 노트가 포함되어 있으므로 PDF를 읽으십시오!) 조직에 대한 그녀의 제안을 기록하십시오.
4 년 후 편집 (2014/02/05)하면 다음과 같이 말합니다.
- CSS 전처리 기를 사용하고 파일을 부분적으로 관리합니다 (개인적으로 Sass with Compass를 선호하지만 Less도 꽤 좋고 다른 것도 있습니다)
- OOCSS , SMACSS , BEM 또는 getbem 과 같은 개념을 읽으십시오 .
- Bootstrap 및 Zurb Foundation 과 같은 인기있는 CSS 프레임 워크가 어떻게 구성되어 있는지 살펴보십시오 . 그리고 덜 인기있는 프레임 워크를 할인하지 마십시오. Inuit 는 흥미롭지 만 다른 프레임 워크 도 많이 있습니다.
- 연속 통합 서버 및 / 또는 Grunt 또는 Gulp와 같은 작업 실행기에서 빌드 단계를 사용하여 파일을 결합 / 축소합니다.
CSS에 제목을 쓰지 마십시오
섹션을 파일로 분할하기 만하면됩니다. 모든 CSS 주석은 바로 그 주석이어야합니다.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
스크립트를 사용하여 하나로 결합하십시오. 필요하다면. 멋진 디렉토리 구조를 가질 수도 있고 스크립트가 .css파일을 재귀 적으로 스캔하도록 할 수도 있습니다.
머리글을 작성해야하는 경우 파일 시작 부분에 TOC가 있어야합니다.
목차의 제목은 나중에 작성하는 제목과 완벽하게 동일해야합니다. 제목을 찾는 것은 고통 스럽습니다. 문제를 추가하기 위해 첫 번째 헤더 다음에 다른 헤더가 있다는 것을 정확히 아는 사람이 누구입니까? 추신. TOC를 작성할 때 각 줄의 시작 부분에 doc-like * (별표)를 추가하지 마십시오. 텍스트를 선택하는 것이 더 성 가실뿐입니다.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
블록 외부가 아닌 규칙과 함께 또는 규칙 내에서 주석 작성
우선, 스크립트를 편집 할 때 50/50의 확률로 규칙 블록 외부에있는 항목에주의를 기울일 것입니다 (특히 큰 텍스트 덩어리 인 경우;)). 둘째, 외부에 "댓글"이 필요한 경우는 거의 없습니다. 외부에 있다면 99 %의 타이틀이므로 그대로 유지하세요.
페이지를 구성 요소로 분할
구성 요소는 대부분 position:relative, no padding및 no 가 있어야합니다 margin. 이 간소화 %가 많은뿐만 아니라 훨씬 더 간단 허용 규칙 absolute:position절대 위치 지정된 컨테이너가 있다면 계산할 때 절대 위치 지정된 요소가 컨테이너를 사용하기 때문에, 요소 보내고 ' top, right, bottom, left속성을.
HTML5 문서에서 대부분의 DIV는 일반적으로 구성 요소입니다.
구성 요소는 페이지에서 독립적 인 단위로 간주 될 수도 있습니다. 평신도의 용어로 블랙 박스 와 같은 것을 취급하는 것이 타당하다면 어떤 것을 구성 요소처럼 취급하십시오 .
다시 QA 페이지 예제로 이동 :
#navigation
#question
#answers
#answers .answer
etc.
페이지를 구성 요소로 분할하여 작업을 관리 가능한 단위로 분할합니다.
누적 효과가있는 규칙을 같은 줄에 배치합니다.
예를 들어 border, margin및 padding(하지만 outline) 당신은 스타일링하는 요소의 치수와 크기에 대한 모든 추가.
position: absolute; top: 10px; right: 10px;
한 줄에서 읽을 수없는 경우 최소한 가까운 곳에 두십시오.
padding: 10px; margin: 20px;
border: 1px solid black;
가능한 경우 속기 사용 :
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
선택기를 반복하지 마십시오.
동일한 선택기의 인스턴스가 더 많은 경우 동일한 규칙의 여러 인스턴스가 불가피하게 끝날 가능성이 높습니다. 예를 들면 :
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
ID / 클래스를 사용할 수있는 경우 TAG를 선택 자로 사용하지 마십시오.
먼저 DIV 및 SPAN 태그는 예외입니다. 절대 사용해서는 안됩니다. ;) 클래스 / ID를 첨부 할 때만 사용하십시오.
이...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
다음과 같이 작성해야합니다.
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
여분의 매달린 DIV가 있기 때문에 선택기에 아무것도 추가하지 않습니다. 또한 불필요한 태그 규칙을 강제합니다. 당신은, 예를 들어, 변경한다면 .answerA로부터 divA와 article스타일 휴식 것입니다.
또는 더 명확하게하려면 :
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
border-collapse속성 인 이유는에 적용될 때만 의미가있는 특수 속성 때문 table입니다. 그렇지 .statistics않은 경우 table적용되지 않아야합니다.
일반적인 규칙은 악합니다!
- 가능한 경우 일반 / 마법 규칙을 작성하지 마십시오.
- CSS 재설정 / 재설정 해제를위한 것이 아니라면 모든 일반 마법이 하나 이상의 루트 구성 요소에 적용되어야합니다.
그들은 당신의 시간을 절약하지 않고 당신의 머리를 터뜨리게합니다. 유지 보수를 악몽으로 만듭니다. 규칙을 작성할 때 적용되는 위치를 알 수 있지만 나중에 규칙이 엉망이되지 않을 것이라는 보장은 없습니다.
이 일반적인 규칙에 추가하는 것은 스타일링하는 문서에 대한 아이디어가 있더라도 혼란스럽고 읽기 어렵습니다. 이것은 일반 규칙을 작성해서는 안된다는 의미가 아니라, 진정으로 일반 규칙을 의도하지 않는 한 사용하지 마십시오. 심지어는 가능한 한 많은 범위 정보를 선택기에 추가합니다.
이런거 ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... 프로그래밍 언어에서 전역 변수를 사용하는 것과 동일한 문제가 있습니다. 그들에게 범위를 주어야합니다!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
기본적으로 다음과 같이 읽습니다.
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
내가 아는 구성 요소가 페이지의 단일 항목 일 때마다 ID를 사용하는 것을 좋아합니다. 귀하의 요구는 다를 수 있습니다.
참고 : 이상적으로는 충분히 작성해야합니다. 그러나 선택기에서 더 많은 구성 요소를 언급하는 것은 더 적은 구성 요소를 언급하는 것에 비해 더 관용적 인 실수입니다.
pagination구성 요소 가 있다고 가정합니다 . 사이트의 여러 곳에서 사용합니다. 이것은 일반적인 규칙을 작성할 때 좋은 예가 될 것입니다. 당신에게 말할 수 있습니다 display:block개별 페이지 번호 링크를 그들에게 어두운 회색 배경을 제공합니다. 표시하려면 다음과 같은 규칙이 있어야합니다.
.pagination .pagelist a {
color: #fff;
}
이제 답변 목록에 페이지 매김을 사용한다고 가정 해 보겠습니다.
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
이렇게하면 원하지 않는 흰색 링크가 검은 색으로 표시됩니다.
이를 수정하는 잘못된 방법은 다음과 같습니다.
.pagination .pagelist a {
color: #fff !important;
}
문제를 해결하는 올바른 방법은 다음과 같습니다.
#answers .header .pagination .pagelist a {
color: #fff;
}
복잡한 "논리"주석은 작동하지 않습니다. :)
"이 값은 blah-blah와 blah-blah의 높이를 결합한 값에 따라 다릅니다."라고 쓰면 실수를하게되고 마치 카드 집처럼 쓰러 질 것입니다.
귀하의 의견은 단순하게 유지하십시오. "논리적 연산"이 필요한 경우 SASS 또는 LESS 와 같은 CSS 템플릿 언어 중 하나를 고려하십시오 .
컬러 팔레트는 어떻게 작성합니까?
끝까지 남겨주세요. 전체 색상 팔레트에 대한 파일이 있습니다. 이 파일이 없어도 스타일에는 규칙에 사용할 수있는 색상 팔레트가 있습니다. 색상 팔레트를 덮어 써야합니다. 매우 높은 수준의 부모 구성 요소 (예 :)를 사용하여 선택기를 연결 한 #page다음 스타일을 자체적으로 충분한 규칙 블록으로 작성합니다. 색상이나 그 이상일 수 있습니다.
예.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
아이디어는 간단합니다, 당신의 컬러 팔레트는 기본 스타일의 스타일 시트 독립적 인 계단식 으로.
이름이 적고 메모리가 덜 필요하므로 코드를 더 쉽게 읽을 수 있습니다.
적은 수의 이름을 사용하는 것이 좋습니다. 이상적으로는 매우 간단한 (그리고 짧은!) 단어를 사용하십시오 : 텍스트, 본문, 헤더.
또한 간단한 단어의 조합이 이해하기 더 쉽다는 것을 발견했습니다. 포스트 본문, 포스트 헤드, 사용자 정보 등의 긴 "적절한"단어를 사용하면됩니다.
당신의 스타일 스프를 읽기 위해 오는 낯선 사람이 (몇 주 후에 당신처럼)) 어휘를 작게 유지하십시오. 모든 선택기가 사용되는 곳보다는 단어가 사용되는 곳을 이해하기 만하면됩니다. 예를 들어 .this요소가 "선택된 항목"또는 "현재 항목"등일 때마다 사용합니다 .
자신을 정리하십시오
CSS를 작성하는 것은 먹는 것과 같으며 때로는 엉망이됩니다. 그 엉망진창을 정리하지 않으면 쓰레기 코드가 쌓일 것입니다. 사용하지 않는 클래스 / ID를 제거하십시오. 사용하지 않는 CSS 규칙을 제거하십시오. 모든 것이 잘되어 있고 규칙이 충돌하거나 중복되지 않았는지 확인하십시오.
내가 제안했듯이 일부 컨테이너를 스타일에서 블랙 박스 (구성 요소)로 취급하고 선택기에서 해당 구성 요소를 사용하고 모든 것을 하나의 전용 파일에 보관 (또는 TOC 및 헤더로 파일을 적절하게 분할)하면 작업이 훨씬 더 쉽습니다 ...
firefox 확장 Dust-Me Selectors (팁 : sitemap.xml을 가리킴)와 같은 도구를 사용하여 CSS 핵과 카니에 숨겨진 쓰레기를 찾을 수 있습니다.
unsorted.css파일 보관
QA 사이트의 스타일을 지정하고 있으며 "답변 페이지"에 대한 스타일 시트가 이미 있다고 가정 해 보겠습니다 answers.css. 이제 새 CSS를 많이 추가해야하는 경우 unsorted.css스타일 시트에 추가 한 다음 스타일 시트로 리팩터링하십시오 answers.css.
이에 대한 몇 가지 이유 :
- 작업을 마친 후 리팩토링하는 것이 더 빠릅니다. 그런 다음 존재하지 않는 규칙을 검색하고 코드를 삽입합니다.
- 제거 할 내용을 작성하고 코드를 삽입하면 해당 코드를 제거하기가 더 어려워집니다.
- 원본 파일에 추가하면 규칙 / 선택기 중복이 발생하기 쉽습니다.
CSS팽창 에 대응하는 가장 좋은 방법 은 객체 지향 CSS 원칙을 사용하는 것입니다.
꽤 좋은 OOCSS 프레임 워크 도 있습니다 .
이데올로기 중 일부는 여기에 언급 된 많은 답변에 위배되지만 CSS객체 지향 방식 으로 설계하는 방법을 알게되면 실제로 코드를 간결하고 의미있게 유지하는 데 효과적입니다.
여기서 핵심은 사이트에서 '개체'또는 빌딩 블록 패턴을 식별하고이를 사용하여 설계하는 것입니다.
Facebook은 프런트 엔드 코드 (HTML / CSS)에서 많은 비용을 절감하기 위해 OOCSS의 제작자 인 Nicole Sullivan 을 고용했습니다 . 당신이 변환 말할 것도 같은 예는 실제로 CSS에서, 그러나 그것의 소리, 당신을 위해 아주 가능하다 너무 당신의 HTML에서뿐만 아니라 절감 효과를 얻을 수있는 table많은으로 기반의 레이아웃을 div의
또 다른 훌륭한 접근 방식은 OOCSS와 일부 측면에서 유사하며 처음부터 확장 가능하고 모듈화되도록 CSS를 계획하고 작성하는 것입니다. Jonathan Snook 은 SMACSS-CSS를위한 확장 가능한 모듈 식 아키텍처에 대한 훌륭한 글을 쓰고 서적 / 전자 책을 작성했습니다.
몇 가지 링크로 연결하겠습니다 :
대규모 CSS의 5 가지 실수-(비디오)
대규모 CSS의 5 가지 실수-(슬라이드)
CSS Bloat-(슬라이드)
또한 캐스케이드, 무게 및 작동 방식을 이해해야합니다.
클래스 식별자 (div.title) 만 사용하고 있습니다. ID도 사용할 수 있으며 ID가 클래스보다 더 많은 비중을 차지한다는 사실을 알고 계셨습니까?
예를 들면
#page1 div.title, #page1 ul, #page1 span {
// rules
}
모든 요소가 글꼴 크기, 예, 색상 또는 규칙이 무엇이든 공유하도록 만듭니다. # page1의 후손 인 모든 DIV가 특정 규칙을 갖도록 만들 수도 있습니다.
가중치에 관해서는 CSS 축이 가장 일반적인 / 가장 가벼운 것에서 가장 구체적인 / 가장 무거운 것으로 이동한다는 것을 기억하십시오. 즉, CSS 선택기에서 요소 지정자는 클래스 지정자에 의해 무시되고 요소 지정자는 ID 지정자에 의해 무시됩니다. 숫자가 중요하므로 두 요소 지정자 (ul li)가있는 선택자는 단일 지정자 (li) 만있는 선택자보다 가중치가 더 큽니다.
숫자처럼 생각하십시오. 1 열의 9는 여전히 10 열의 1보다 작습니다. ID 지정자, 클래스 지정자 및 두 개의 요소 지정자가있는 선택자는 ID가없는 선택자, 500 개의 클래스 지정자 및 1,000 개의 요소 지정자보다 가중치가 더 큽니다. 물론 이것은 터무니없는 예이지만 아이디어를 얻습니다. 요점은이 개념을 적용하면 많은 CSS를 정리하는 데 도움이됩니다.
BTW, class = "title"이있는 다른 요소와 충돌하지 않는 한 클래스 (div.title)에 요소 지정자를 추가 할 필요가 없습니다. 나중에 해당 가중치를 사용해야 할 수 있으므로 불필요한 가중치를 추가하지 마십시오.
Less CSS Dynamic 프레임 워크를 제안해도 될까요?
앞서 언급 한 SASS와 유사합니다.
부모 클래스별로 CSS를 유지하는 데 도움이됩니다.
예
#parent{
width: 100%;
#child1
{
background: #E1E8F2;
padding: 5px;
}
#child2
{
background: #F1F8E2;
padding: 15px
}
}
기능 : # child1 및 # child2 모두에 width : 100 %를 적용합니다.
또한 # child1 특정 CSS는 #parent에 속합니다.
이것은
#parent #child1
{
width: 100%;
background: #E1E8F2;
padding: 5px;
}
#parent #child2
{
width: 100%;
background: #F1F8E2;
padding: 15px;
}
어려운 일은 사이트에 필요한 디자인을 일련의 규칙으로 변환하는 것입니다. 사이트 디자인이 명확하고 규칙 기반이라면 클래스 이름과 CSS 구조가 여기에서 흐를 수 있습니다. 그러나 사람들이 시간이 지남에 따라 사이트에별로 말이되지 않는 부분을 무작위로 추가한다면 CSS에서 할 수있는 일이 많지 않습니다.
내 CSS 파일을 대략 다음과 같이 구성하는 경향이 있습니다.
를 기반으로 CSS 리셋, 에릭 마이어의 . (그렇지 않으면 대부분의 요소에 대해 기본 브라우저 스타일을 재설정하는 규칙이 하나 또는 두 개 이상 있다는 것을 알았습니다. 예를 들어 대부분의 목록은 목록의 기본 HTML 스타일처럼 보이지 않습니다.)
모든 페이지에 나타나는 구성 요소의 스타일 (머리글, 바닥 글 등)
사이트의 다양한 위치에서 사용되는 구성 요소의 스타일
개별 페이지에만 관련된 스타일
보시다시피 대부분은 사이트 디자인에 따라 다릅니다. 디자인이 명확하고 체계적이라면 CSS가 될 수 있습니다. 그렇지 않다면, 당신은 망했습니다.
내 대답은 귀하의 질문에서 제기 한 높은 수준의 우려 사항을 해결하기 위해 높은 수준입니다. 더 예쁘게 만들기 위해 할 수있는 낮은 수준의 조직적 트릭과 조정이있을 수 있지만 그 어느 것도 방법 론적 결함을 해결할 수는 없습니다. CSS 폭발에 영향을 미치는 몇 가지 사항이 있습니다. 분명히 사이트의 전반적인 복잡성뿐만 아니라 이름 지정 의미, CSS 성능, CSS 파일 구성 및 테스트 가능성 / 허용 가능성과 같은 것입니다.
이름 지정 의미론으로 올바른 길을 가고있는 것 같지만 한 단계 더 나아갈 수 있습니다. 구조적 수정없이 사이트에 반복적으로 나타나는 HTML 섹션 ( "모듈"이라고 함)은 선택기 루트로 간주 될 수 있으며 여기에서 해당 루트를 기준으로 내부 레이아웃의 범위를 지정할 수 있습니다. 이것은 객체 지향 CSS 의 기본 신조이며 Yahoo 엔지니어의이 강연에서 이에 대해 자세히 읽고 볼 수 있습니다 .
이 깔끔한 접근 방식은 성능 문제와 반대로 실행될 수 있으며, 이는 id 또는 tag name 기반의 짧은 선택기 를 선호 합니다. 그 균형을 찾는 것은 당신에게 달려 있지만, 방대한 사이트가 없다면 이것은 당신의 머리 뒤에서 선택자를 짧게 유지하도록 상기시키는 가이드 일뿐입니다. 여기에서 성능에 대해 자세히 알아보십시오 .
마지막으로 전체 사이트에 대해 단일 CSS 파일 을 사용 하시겠습니까? 아니면 여러 파일 (페이지 당 또는 섹션 파일에 사용되는 단일 기본 파일)을 사용 하시겠습니까? 단일 파일은 성능면에서는 더 좋지만 여러 팀 구성원이 이해 / 유지 관리하기가 더 어려울 수 있으며 테스트하기도 더 어려울 수 있습니다. 테스트 를 위해 충돌 및 의도하지 않은 계단식 테스트를 위해 지원되는 모든 CSS 모듈이 포함 된 단일 CSS 테스트 페이지 를 사용 하는 것이 좋습니다 .
또는 CSS 규칙의 범위를 페이지 또는 섹션으로 지정 하는 다중 파일 접근 방식 을 사용할 수 있습니다 . 이를 위해서는 브라우저가 성능 문제인 여러 파일을 다운로드해야합니다. 서버 측 프로그래밍을 사용하여 CSS 파일을 동적으로 단일 파일로 지정하고 집계 (및 축소) 할 수 있습니다. 그러나 이러한 파일은 분리되어 있고 테스트가 분리되어 있기 때문에 페이지 / 섹션에서 모양과 느낌이 일관되지 않을 가능성이 있습니다. 따라서 테스트가 더 어려워집니다.
고객의 특정 요구를 분석하고 그에 따라 이러한 우려의 균형을 맞추는 것은 귀하에게 달려 있습니다.
앞서 말했듯이 : OOCSS에 들어가십시오. Sass / Less / Compass는 사용하고 싶지만 바닐라 CSS가 올바른 방식으로 사용될 때까지 Sass / Less / Compass는 상황을 악화시킬뿐입니다.
우선 효율적인 CSS에 대해 읽어보세요. Google Page Speed를 사용해보고 Souders가 효율적인 CSS에 대해 쓴 내용을 읽어보세요.
그런 다음 OOCSS를 입력하십시오.
- 캐스케이드 작업을 배우십시오. (결국 우리는 그것을 Cascading Stylesheets 라고 부릅니다 ).
- 세분화를 올바르게 수행하는 방법 알아보기 (하향식이 아닌 상향식)
- 구조와 피부를 분리하는 방법을 배우십시오 (유일한 것은 무엇이며 이러한 개체의 변형은 무엇입니까?)
- 컨테이너와 콘텐츠를 분리하는 방법을 알아 봅니다.
- 그리드를 사랑하는 법을 배우십시오.
그것은 CSS 작성에 대한 모든 부분에 혁명을 일으킬 것입니다. 나는 완전히 새로워지고 그것을 사랑합니다.
업데이트 : SMACSS는 OOCSS와 유사하지만 일반적으로 쉽게 적응할 수 있습니다.
CSS 리팩토링 에서 추출한 합리적인 CSS의 핵심 원칙 : 추가 전용에서 모듈 식 CSS로
SASS로 작성하십시오. 변수, 믹스 인 등의 장점을 포기하는 것은 제정신이 아닙니다.
스타일 지정에 HTML ID를 사용하지 마십시오. 항상 클래스를 사용하십시오 . HTML ID를 올바르게 사용하면 전체 페이지에 한 번만 나타납니다. 이는 재이용 성과 완전히 반대되는 것입니다. 이는 현명한 엔지니어링에서 가장 기본적인 제품 중 하나입니다. 더욱이, ID를 포함하는 선택자를 재정의하는 것은 정말 어렵고 종종 하나의 HTML ID를 압도하는 유일한 방법은 다른 ID를 생성하여 ID가 해충처럼 코드베이스에 전파되도록하는 것입니다. 변경되지 않는 Javascript 또는 통합 테스트 후크를 위해 HTML ID를 남겨 두는 것이 좋습니다.
애플리케이션 별 기능이 아닌 시각적 기능으로 CSS 클래스의 이름을 지정하십시오. 예를 들어 ".bundle-product-discount-box"대신 ".highlight-box"라고 말하세요. 이런 식으로 코딩하면 부업을 맡을 때 기존 스타일 시트를 재사용 할 수 있습니다. 예를 들어, 우리는 법률 노트 판매를 시작했지만 최근에는 법률 교사로 옮겼습니다. 우리의 예전 CSS 클래스는 ".download_document_box"와 같은 이름을 가지고있었습니다. 이것은 디지털 문서에 대해 이야기 할 때 의미가 있지만 개인 튜터의 새로운 도메인에 적용될 때만 혼란 스러울 것입니다. 기존 서비스와 향후 서비스 모두에 적합한 더 나은 이름은 ".pretty_callout_box"입니다.
특정 그리드 정보 뒤에 CSS 클래스 이름을 지정하지 마십시오. CSS 커뮤니티에는 CSS 프레임 워크 (Cough Twitter Bootstrap ) 의 디자이너와 제작자 가 "span-2"또는 "cols-8"이 CSS 클래스에 적합한 이름이라고 믿고 있는 무서운 안티 패턴이 존재합니다. CSS의 요점은 마크 업에 영향을주지 않고 디자인을 수정할 수있는 가능성을 제공하는 것입니다. 그리드 크기를 HTML로 하드 코딩하면이 목표가 방해되므로 주말보다 오래 지속될 것으로 예상되는 프로젝트에서는 사용하지 않는 것이 좋습니다. 나중에 그리드 클래스를 피하는 방법에 대해 자세히 알아보십시오.
CSS를 여러 파일로 나눕니다 . 이상적으로는 모든 것을 "구성 요소"/ "위젯"으로 분할 한 다음 이러한 디자인 원자로 페이지를 구성하는 것이 좋습니다. 하지만 현실적으로는 웹 사이트 페이지 중 일부에 특이한 점이 있음을 알 수 있습니다 (예 : 특수 레이아웃 또는 단 하나의 기사에 나타나는 이상한 사진 갤러리). 이러한 경우 특정 페이지와 관련된 파일을 생성 할 수 있으며 요소가 다른 곳에서 재사용된다는 것이 분명 해지면 완전한 위젯으로 리팩토링 할 수 있습니다. 이것은 실질적인 예산 문제에 의해 동기가 부여되는 트레이드 오프입니다.
중첩을 최소화하십시오. 중첩 선택기 대신 새 클래스를 도입하십시오. SASS가 중첩 할 때 반복 선택기의 고통을 제거한다는 사실은 5 단계 깊이 중첩해야한다는 것을 의미하지 않습니다. 선택기를 과도하게 한정하지 마십시오 (예 : ".nav"가 동일한 작업을 수행 할 수있는 "ul.nav"를 사용하지 마십시오.) 그리고 사용자 정의 클래스 이름과 함께 HTML 요소를 지정하지 마십시오 (예 : "h2.highlight"). 대신 클래스 이름 만 사용하고 기본 선택기를 삭제하십시오 (예 : 이전 예제는 ".highlight"여야 함). 과잉 한정 선택자는 가치를 추가하지 않습니다.
전체 애플리케이션에서 일관성이 있어야하는 기본 구성 요소의 스타일을 지정할 때만 HTML 요소 (예 : "h1")에 대한 스타일을 만듭니다. 어쨌든 일부 위치에서 재정의해야 할 가능성이 있으므로 "header ul"과 같은 광범위한 선택기를 피하십시오. 우리가 계속 말했듯이, 대부분의 경우 특정 스타일을 원할 때마다 잘 이름이 지정된 특정 클래스를 사용하고 싶습니다.
Block-Element-Modifier의 기본 사항을 수용하십시오. 예를 들어 여기에서 읽을 수 있습니다. 아주 가볍게 사용했지만 여전히 CSS 스타일을 구성하는 데 많은 도움이되었습니다.
많은 경우 개인이 섹션 사이에 제목 주석이있는 파일을 섹션으로 나누는 것을 볼 수 있습니다.
같은 것
/* Headings and General Text */
.... stuff here for H1, etc..
/* Main page layout */
.... stuff here for layout page setup etc.
꽤 잘 작동하며 나중에 돌아가서 작업중인 작업을 쉽게 찾을 수 있습니다.
BEM을 봐야 합니다.
이론
BEM은 좀 더 재사용 가능하고 모듈 식으로 만들고 종종 스파게티 코드와 특이성 문제로 이어지는 종류의 선택기 간의 충돌을 방지하기 위해 CSS 선택자를 구성하고 명명하기위한 일련의 지침을 제공하려는 시도입니다.
올바르게 사용하면 실제로 매우 긍정적 인 효과가 있습니다.
- 스타일은 요소에 추가 될 때 예상대로 수행합니다.
- 스타일은 누출되지 않으며 추가 된 항목에만 영향을 미칩니다.
- 스타일은 문서 구조에서 완전히 분리됩니다.
- 스타일이 서로를 덮어 쓸 필요가 없습니다.
BEM은 SASS와 잘 작동하여 CSS에 거의 객체 지향 스타일을 제공합니다. 단일 UI 요소의 표시를 처리하고 내부 요소 처리 방법과 같은 '방법'및 색상과 같은 변수를 포함하는 모듈 식 파일을 빌드 할 수 있습니다. 하드 코어 OO 프로그래머는이 아이디어를 꺼릴 수 있지만 실제로 적용된 개념은 모듈성, 느슨한 결합 및 긴밀한 응집력 및 컨텍스트없는 재사용 성과 같은 OO 구조의 더 좋은 부분을 많이 가져옵니다. 당신은 방식으로 구축 할 수 있습니다 사용하여 캡슐화 된 객체 같다고 말대꾸하고 &operato의 연구를.
Smashing Magazine의 자세한 기사는 여기에서 찾을 수 있습니다 . CCS Wizardry의 Harry Roberts (CS에 관련된 모든 사람이 읽어야하는 사람) 가 여기에 있습니다 .
실제로
나는 SMACSS와 OOCSS를 사용하는 것과 함께 이것을 여러 번 사용했습니다. 나는 또한 종종 내 자신의 미숙 한 창조물로 큰 혼란 속에서 일했습니다.
실제 세계에서 BEM을 사용할 때 몇 가지 추가 원칙으로 기술을 보강합니다. 유틸리티 클래스를 활용합니다. 좋은 예는 래퍼 클래스입니다.
.page-section {
width: 100%;
}
@media screen and (min-width: 1200px) {
margin: 0 auto;
width: 1200px;
}
그리고 나는 또한 캐스케이드와 특이성에 어느 정도 의존합니다. 여기 BEM 모듈은 것 .primary-box하고는 .header특정 오버 타고 맥락 것
.header {
.primary-box {
color: #000;
}
}
(나는 모든 것을 가능한 한 일반적이고 상황에 맞게 자유롭게 만들기 위해 최선을 다합니다. 즉, 좋은 프로젝트는 거의 모든 것이 재사용 가능한 모듈에 있음을 의미합니다)
여기서 마지막으로 말씀 드리는 점은 프로젝트가 작고 복잡하지 않은 것처럼 보이지만 두 가지 이유로 처음부터이 작업을 수행해야한다는 것입니다.
- 프로젝트의 복잡성이 증가하므로 좋은 기반을 마련하는 것이 중요합니다. CSS 포함
- 워드 프레스에 구축 되었기 때문에 단순 해 보이는 프로젝트조차도 자바 스크립트가 거의 없기 때문에 CSS에서 여전히 매우 복잡 할 수 있습니다. 좋습니다. 서버 측 코딩을 할 필요가 없으므로 그 부분은 간단하지만 브로셔 착용 프런트 엔드는 20 개의 모듈과 각각의 세 가지 변형이 있습니다. 거기에 매우 복잡한 CSS가 있습니다!
웹 구성 요소
2015 년에 우리는 웹 구성 요소를 살펴보기 시작했습니다. 나는 이것들에 대해 아직 많이 알지 못하지만 모든 프런트 엔드 기능을 자체 포함 모듈로 통합하여 BEM에서 프런트 엔드에 모든 종류의 원칙을 효과적으로 적용하고 분산되었지만 완전히 결합 된 구성 요소를 구성하려고합니다. DOM 조각, Js (MVC) 및 CSS와 같은 요소는 모두 동일한 UI 위젯을 빌드합니다.
이를 통해 theyb는 BEM과 같은 문제를 해결하려고 시도한 CSS에 존재하는 몇 가지 원래 문제를 해결하는 동시에 다른 프런트 엔드 아키텍처를 더 건전하게 만듭니다.
여기에 더 읽을 거리 가 있고 볼만한 가치가 있는 프레임 워크 Polymer 가 있습니다.
드디어
또한 이것이 대규모 CSS 프로젝트가 지저분 해지는 것을 막기 위해 특별히 설계된 훌륭하고 현대적인 모범 사례 CSS 가이드 라고 생각합니다 . 나는 이것들의 대부분을 따르려고 노력합니다.
"Compass Style"CSS 프레임 워크 를 살펴 보시기 바랍니다 .
여기에 훌륭한 자료가 있으며 일부는이 질문에 답하는 데 시간을 할애했지만 개별 또는 개별 스타일 시트에 관해서는 개발을 위해 별도의 파일을 사용하고 사이트 전체에서 사용되는 모든 일반 CSS를 병합했습니다. 배포 할 때 단일 파일로.
이러한 방식으로 두 가지 장점을 모두 누리고 성능을 향상시키고 (브라우저에서 요청되는 HTTP 요청이 적음) 개발 중에 코드 문제를 분리 할 수 있습니다.
참고 URL : https://stackoverflow.com/questions/2253110/managing-css-explosion
'developer tip' 카테고리의 다른 글
| jQuery로 이미지 미리로드 (0) | 2020.09.30 |
|---|---|
| 변수 유형이 문자열인지 확인하는 방법은 무엇입니까? (0) | 2020.09.30 |
| HTML Canvas를 gif / jpg / png / pdf로 캡처 하시겠습니까? (0) | 2020.09.30 |
| Python 애플리케이션에 가장 적합한 프로젝트 구조는 무엇입니까? (0) | 2020.09.30 |
| 모듈의 경로를 검색하는 방법은 무엇입니까? (0) | 2020.09.30 |