[css] CSS 폭발 관리

CSS에 제목을 쓰지 마십시오

섹션을 파일로 나누기 만하면됩니다. 모든 CSS 주석은 주석이어야합니다.

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

스크립트를 사용하여 하나를 결합하십시오. 필요하다면. 멋진 디렉토리 구조를 가질 수도 있고 스크립트가 재귀 적으로 .css파일을 스캔하도록 할 수도 있습니다.

표제를 작성해야하는 경우 파일 시작 부분에 TOC를 두십시오.

목차의 제목은 나중에 쓰는 제목과 완전히 같아야합니다. 제목을 찾는 것은 고통입니다. 문제를 더하기 위해 첫 번째 헤더 다음에 다른 헤더가 있다는 것을 어떻게 알고 있습니까? 추신. TOC를 작성할 때 각 줄의 시작 부분에 문서와 같은 * (별표)를 추가하지 마십시오. 텍스트를 선택하는 것이 더 성가 시게합니다.

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff
 */
...
/* Body Stuff
 */

블록 외부가 아닌 규칙 내에서 또는 규칙 내에서 의견 쓰기

먼저, 스크립트를 편집 할 때 룰 블록 외부에있는 내용에주의를 기울여야합니다 (특히 텍스트가 큰 경우;)). 둘째, 외부에 “댓글”이 필요한 경우는 거의 없습니다. 외부에있는 경우 제목 시간의 99 %이므로 제목을 그대로 유지하십시오.

페이지를 컴포넌트로 분할

구성 요소에는 대부분 position:relative, no padding및 no 가 있어야합니다 margin. 이 간소화 %가 많은뿐만 아니라 훨씬 더 간단 허용 규칙 absolute:position절대 위치 지정된 컨테이너가 있다면 계산할 때 절대 위치 지정된 요소가 컨테이너를 사용하기 때문에, 요소 보내고 ‘ top, right, bottom, left속성을.

HTML5 문서의 대부분의 DIV는 일반적으로 구성 요소입니다.

구성 요소는 페이지에서 독립적 인 단위로 간주 될 수도 있습니다. 평신도의 용어로 블랙 박스 와 같은 것을 다루는 것이 합리적이라면 구성 요소와 같은 것을 취급합니다 .

품질 보증 페이지 예를 다시 살펴 보겠습니다.

#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로부터div A와 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-reset / rereset에 대한 것이 아닌 한 모든 일반적인 마술은 적어도 하나의 루트 구성 요소에 적용되어야합니다.

그들은 시간을 절약하지 않고 머리를 터뜨립니다. 유지 보수를 악몽으로 만듭니다. 규칙을 작성할 때 규칙이 적용되는 위치를 알 수 있지만 나중에 규칙이 엉망이된다는 보장은 없습니다.

이 일반적인 규칙에 추가하는 것은 스타일을 지정하는 문서에 대한 아이디어가 있더라도 혼란스럽고 읽기 어렵습니다. 이것은 일반적인 규칙을 작성해서는 안된다고 말하는 것이 아니라, 규칙을 일반화하려는 의도가 아니라면 규칙을 사용하지 말고 선택기에 가능한 한 많은 범위 정보를 추가하는 것입니다.

이런 것들 …

.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파일 보관

품질 보증 사이트를 스타일링하고 있고 ‘응답 페이지’에 대한 스타일 시트가 이미 있다고 가정 해 보겠습니다 answers.css. 새로운 CSS를 많이 추가해야하는 경우 unsorted.css스타일 시트에 추가 한 다음answers.css .

이에 대한 몇 가지 이유 :

• 완료 한 후 리팩토링하는 것이 더 빠르며, 규칙을 검색하고 (존재하지 않을 수 있음) 코드를 삽입하는 것입니다
• 제거 할 내용을 작성하고 코드를 삽입하면 해당 코드를 제거하기가 더 어려워집니다.
• 원본 파일에 쉽게 추가하면 규칙 / 선택기 중복이 발생합니다

답변

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

 #parent{     
  width: 100%;

    #child1
    {
     background: #E1E8F2;    
     padding: 5px;
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}