CSS 작성 방법 이해하기

이 게시물에서 우리는 CSS 작성 방법론, 몇 가지 잘 알려진 방법론과 CSS 코드를 최적화하는 데 유용 할 수있는 방법에 대해 설명합니다. 볼을 굴리는 가장 간단한 질문부터 시작하겠습니다. 방법론이란 무엇인가??

방법론은 방법의 체계. 방법을 체계적인 방식으로 무언가를하는 단순한 방법으로 생각하십시오. 미리 설정된 방식으로 원하는 결과를 얻으십시오..

더 나은 결과를 얻으려면, 우리는 더 나은 계획을 세워 방법을 개선합니다., 주문 변경, 단계 간소화 - 작동 방식 더 빠른 그리고 더 실력 있는.

CSS 방법론

이제 CSS 방법론에 대해 이야기 해 보겠습니다. 단지 인생의 모든 것과 마찬가지로, CSS를 작성하는 방법도 있습니다. 일부는 CSS를 먼저 작성하고, 일부는 레이아웃 스타일을 마지막으로 작성하고, 일부는 스타일을 지정하기 위해 2 ~ 3 개의 클래스로 시작하고, 일부는 모든 CSS 코드를 작성합니다. 하나의 파일.

우리가 선호하는 방법은 시간이 지남에 따라 독자적으로 수립되었거나 다른 사람들의 영향을 받거나 직장에서 요구되거나 위의 모든 것 때문에 요구되었습니다. 그러나 시간이 지남에 따라 CSS 베테랑들은 CSS를 작성하는 방법론 그 이상은 유연하고, 정의되고, 재사용 가능하고, 이해할 수있는 과 다루기 쉬운.

우리는 다음과 같은 공식화 된 방법론을 살펴볼 것입니다.

1. OOCSS (객체 지향 CSS)
2. BEM (블록, 요소, 수정 자)
3. ACSS (Atomic CSS)
4. SMACSS (CSS를위한 확장 가능한 모듈 형 아키텍처)

노트: 아래에 언급 된 개념 중 어느 것도 이러한 방법론과 동일한 이름과 개념을 가질 수있는 프레임 워크, 라이브러리 또는 도구와 혼동해서는 안됩니다. 이 게시물은 CSS 작성 방법론에 관한 것입니다..

1. OOCSS

2008 년 Nicole Sullivan에 의해 개발 된 OOCSS (Object Oriented CSS)의 핵심 개념은 CSS 목적 식별, 구조 및 시각적 스타일의 분리, 위치 기반 스타일 피하기.

OOCSS에서 Nicole이 제안한 첫 번째 단계는 CSS에서 객체 식별.

“기본적으로 CSS "객체"는 반복적 인 시각적 패턴으로, HTML, CSS 및 가능하면 JavaScript의 독립 스 니펫으로 추상화 될 수 있습니다. 그런 다음 해당 개체를 사이트 전체에서 재사용 할 수 있습니다. - Nicole Sullivan, Github (OOCSS)“

예를 들어이 사이트에서이 구조를 가져옵니다. 여기에는 반복적 인 시각적 패턴이며 자체 HTML 및 / 또는 CSS가있는 무언가가 있습니다.

여기에는 두 가지 유형의 객체가 있습니다. 제목의 더 큰 미리보기 사전 미리보기 - 기본 그리고 우리가 지명 할 제목을 가진 사이드 바 사전 미리보기 - 보조.

우리는 분리 된 구조와 피부 (즉, 객체의 모양을 만드는 스타일). 두 가지 유형의 객체는 구조가 다르며, 모양이 비슷하더라도 더 큰 상자에 있습니다. 왼쪽의 이미지와 오른쪽의 제목이 있습니다..

두 객체의 이미지를 클래스로 만들어 보겠습니다. 포스트 미리보기 이미지 이미지를 왼쪽에 놓는 코드를 추가하십시오. 이렇게하면 CSS의 객체 안에 이미지를 넣을 위치의 코드를 반복하지 않아도됩니다. 다른 유사한 객체가있는 경우, 우리는 포스트 미리보기 이미지 그들을 위해.

피부 분리는 다음과 같은 간단한 스타일에도 적용 할 수 있습니다. 테두리 또는 배경. 동일한 파란색 경계선을 가진 여러 객체가있는 경우, 파란색 테두리에 대해 별도의 클래스 만들기 객체에 추가하면 파란색 테두리를 코딩해야하는 횟수를 줄입니다. CSS에서.

Nicole은 또한 다음과 같이 제안합니다. 아니 위치에 따라 스타일 추가, 예를 들어 특정 div 내의 모든 링크를 대상으로 타겟팅하는 대신 해당 링크에 형광펜 계급 적절한 CSS 스타일로 이렇게하면 페이지의 다른 부분에서 링크를 강조 표시해야 할 때 형광펜 클래스를 다시 사용할 수 있습니다.

OOCSS의 장점: 재사용 가능한 시각적 스타일 지정 코드, 위치 융통성있는 코드, 중첩 된 선택자 축소.

단점 OOCSS: 상당한 양의 반복되는 시각적 패턴이 없으면 구조와 시각적 스타일 코드를 분리하는 것이 불필요한 것처럼 보입니다..

2. BEM

2009 년 Yandex의 개발자가 개발 한 BEM (블록, 요소, 수정 자)의 핵심 개념은 블록, 요소 & 수정 자 그에 따라 이름을 붙인다..

에이 “블록” 본질적으로 “목적”(앞의 예제에서), “요소” 블록의 구성 요소 (이미지, 제목, 위의 미리보기 텍스트)를 나타냅니다. 미리보기 게시물- 사물). 에이 “수정 자” 블록이나 요소의 상태가 변경 될 때 사용할 수 있습니다. 예를 들어 활성 클래스를 메뉴 항목에 추가하여 강조 표시하면 활성 클래스가 수정 자의 역할을합니다..

구성 요소를 식별했으면 그에 따라 이름을 지정하십시오. 예 :

• 메뉴 블록에는 클래스가 있습니다. 메뉴
• 그것의 품목에는 종류가있을 것이다 메뉴 아이템 (블록과 요소는 두 개의 밑줄로 구분됩니다)
• 메뉴의 무효 상태의 변경자는 클래스를 가질 수 있습니다. menu_disabled (하나의 밑줄로 구분 된 수식어)
• 메뉴 항목의 비활성화 상태에 대한 수정자는 menu__item_disabled.

수정 자의 경우 핵심 가치 형식 지정. 예를 들어, 더 이상 사용되지 않는 기사에 링크 된 메뉴 항목을 구별하기 위해 우리는 그들에게 클래스를 제공 할 수 있습니다 menu__item_status_obsolete, 보류중인 문서를 가리키는 모든 메뉴 항목의 스타일을 지정하기 위해 클래스 이름은 menu__item_status_pending.

이름은 당신에게 맞는 것을 수정할 수 있습니다. 아이디어는 클래스 이름에서 식별, 차단, 요소 및 수정 자. BEM 사이트에 나열된 명명 시스템 중 일부를 확인하십시오..

BEM의 사이트 목록 블록, 엘리먼트 및 수식어 분리를 CSS 파일 시스템으로 가져 오는 방법. 같은 블록 “버튼” 과 “투입물” 는 해당 블록과 연관된 파일 (.css, .js)로 구성된 고유 한 폴더를 가질 수 있으므로 다른 프로젝트에서 해당 블록을 가져 오려는 경우 작업을 더 쉽게 만듭니다..

BEM의 장점 :클래스 이름을 사용하기 쉬우 며 심층 CSS 셀렉터 축소.

BEM의 단점 :이름을 정상적으로 유지하기 위해, BEM은 우리가 요소 중첩에 대한 차단을 유지할 것을 권고합니다.

3. ACSS

Yahoo의 유명한 어딘가, 첫 번째 끝 부분 21 세기^성 ACSS의 핵심 개념은 가장 원자 수준의 스타일링, 즉 속성 - 값 쌍에 대한 클래스를 생성 한 다음 필요할 때 HTML에서 사용하는 것입니다.

ACSS (Atomic CSS)가 처음 개발 된 시점은 그 개념이 오래 동안 사용 된 이후로 결정하기가 어렵습니다. 개발자는 다음과 같은 클래스를 사용하고 있습니다. .clearfix overflow : hidden 오랫동안. ACSS의 아이디어는 거의 모든 재사용 할 수있는 비 콘텐츠 관련 속성 - 값 쌍에 대한 클래스를가집니다. 우리는 우리 사이트에서 필요할 것이고 HTML 엘리먼트에 필요할 때 이들 클래스를 추가 할 것이다..

다음은 ACSS를 기반으로하는 클래스의 예와 HTML에서 사용되는 클래스의 예입니다..

 .mr-8 margin-right : 8px; .fl-r float : right; 
 

보시다시피, 클래스의 수는이 메소드로 높아지고 HTML은 모든 클래스에 의해 혼잡해질 것입니다. 이 방법은 100 % 효과가 없지만 원하는 경우 유용 할 수 있습니다. 야후는 이것을 결국 사용합니다..

ACSS의 장점 :HTML을 떠나지 않고 HTML 스타일 지정하기.

ACSS의 단점 :수업이 너무 많아서 깔끔하지 않고 싫어 할 수도 있습니다..

4. SMACSS

Jonathan Snook이 2011 년에 개발 한 SMACSS (CSS 용 Scalable and Modular Architecture)는 5 가지 유형의 스타일 규칙을 식별하여 작동합니다. 클래스 이름과 파일 시스템은 이들을 기반으로 생성됩니다..

“SMACSS는 설계 프로세스를 검토하고 이러한 견고한 프레임 워크를 유연한 사고 프로세스에 적용하는 방법입니다. - 조나단 스누크”

SMACSS는 5 가지 유형의 스타일 규칙을 식별합니다. 기본, 레이아웃, 모듈, 상태, 과 테마.

• 기본 스타일은 기본 HTML 태그와 같은 기본 스타일입니다.

  , .

• 레이아웃 스타일은 페이지의 레이아웃을 정의하는 데 사용되는 스타일입니다 (예 : 머리글, 바닥 글 및 사이드 메뉴가 코딩되는 곳의 코딩)..
• 모듈 스타일은 갤러리 나 슬라이드 쇼와 같은 모듈에만 적용됩니다..
• 상태 스타일은 숨기기 또는 사용 중지와 같은 변경 가능한 상태의 요소를 강조 표시하기위한 것입니다..
• 테마는 페이지의 시각적 구성을 변경하는 데 사용됩니다..

다른 스타일 규칙은 클래스 이름의 접두어 (예 : l- 헤더 (레이아웃) 또는 t- 헤더 (테마))를 사용하여 식별 할 수 있습니다. 또한 다른 유형의 규칙을 별도의 파일 및 폴더에 배치하여 규칙을 구성 할 수 있습니다.

SMACSS의 장점 :더 나은 조직 코드.

SMACSS의 단점: 나는 생각할 수 없다..

SMACSS에 관해 읽을 수있는 무료 온라인 책이 있습니다. 또는 더 많이 공부하기 위해 전자 책 버전을 구입할 수 있습니다..

결론

위의 CSS 방법론을 사용하면 CSS 코드 관리 및 최적화. OOCSS-SMACSS 또는 OOCSS-BEM 또는 BEM-SAMCSS와 같이 서로 결합하여 필요에 맞게 조합 할 수 있습니다..

다음과 같은 CSS 방법론을 실행하기위한 자동화 된 시스템을 원한다면 프레임 워크와 라이브러리도 있습니다.

• OOCSS 프레임 워크
• BEM 도구
• 유기적 인 CSS 프레임 워크 (원자 개념을 따름).