SMACSS 탐색: CSS를 위한 확장 가능한 모듈식 아키텍처

게시 됨: 2022-03-11

큰 프로젝트나 개발자 그룹과 함께 작업할 때 코드가 지저분하고 읽기 어렵고 확장하기 어렵다는 사실을 종종 알게 됩니다. 이것은 특히 시간이 지나고 돌아와서 다시 보고 나면 더욱 그렇습니다. 우리는 그것을 썼을 때와 같은 마음가짐으로 노력해야 합니다.

그래서 많은 사람들이 CSS를 더 읽기 쉽게 만들 수 있도록 코드 스타일을 지정하는 데 도움이 되는 CSS 아키텍처를 만들었습니다. SMACSS( 즉, CSS 를 위한 확장 가능 및 모듈식 아키텍처 )는 바로 이를 목표로 합니다. 제가 채택한 것은 Jonathan Snook의 특정 CSS 아키텍처 지침 세트입니다.

이제 SMACSS의 아키텍처 접근 방식은 Bootstrap이나 Foundation과 같은 CSS 프레임워크와 약간 다릅니다. 대신 템플릿이나 가이드와 같은 규칙 집합입니다. 따라서 몇 가지 CSS 디자인 패턴을 살펴보고 이를 사용하여 코드를 더 좋고, 깨끗하고, 읽기 쉽고, 모듈화할 수 있는 방법을 알아보겠습니다.

모든 SMACSS 프로젝트 구조는 5가지 범주를 사용합니다.

  1. 베이스
  2. 형세
  3. 모듈
  4. 상태
  5. 주제

베이스

SMACSS에서 기본 스타일은 페이지의 어느 위치에서나 요소가 어떻게 보일지 정의합니다. 그것들은 기본값입니다. 재설정 스타일시트를 사용하는 경우 하드 코딩된 내부 기본 CSS 기본값 간의 차이에도 불구하고 결과 스타일이 브라우저 간에 동일하도록 합니다.

기본 스타일에서는 베어 요소 선택기 또는 의사 클래스가 있는 요소 선택기만 포함해야 하지만 클래스 또는 ID 선택기는 포함하지 않아야 합니다. (클래스나 ID를 그 안에 넣어야 할 충분한 이유가 있어야 합니다. 아마도 타사 플러그인 요소의 스타일을 지정하고 해당 특정 요소의 기본 스타일을 재정의해야 하는 경우일 수 있습니다.)

다음은 기본 파일 단위의 모양에 대한 예입니다.

 html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

따라서 기본 크기, 여백, 색상, 테두리 및 웹사이트 전체에서 사용할 계획인 기타 기본값을 포함해야 합니다. 타이포그래피와 양식 요소는 모든 페이지에 나타나며 동일한 디자인 및 테마의 일부인 느낌과 모양을 제공하는 통일된 스타일을 가져야 합니다.

SMACSS 여부에 관계없이 !important 의 사용을 최대한 피하고 깊은 중첩을 사용하지 않는 것이 좋습니다. 하지만 이에 대해서는 이 게시물의 뒷부분에서 자세히 설명하겠습니다. 또한 연습이 CSS 재설정을 사용하는 것이라면 여기에 포함시켜야 합니다. (저는 Sass를 사용하는 것을 선호하므로 각 페이지의 <head> 요소에서 별도로 복사하거나 참조하지 않고 파일 상단에 포함합니다.)

관련 항목: Sass를 사용한 테마 지정: SCSS 자습서

형세

레이아웃 스타일은 페이지를 주요 섹션으로 나눕니다. 예를 들어 탐색이나 아코디언 같은 섹션이 아니라 실제로는 최상위 섹션으로 나뉩니다.

SMACSS 레이아웃 스타일의 예: 머리글, 사이드바, 콘텐츠/메인 및 바닥글

SMACSS 레이아웃 스타일은 머리글, 사이드바, 콘텐츠/메인 및 바닥글과 같은 주요 섹션을 위한 것입니다.

이러한 레이아웃은 상자, 카드, 정렬되지 않은 목록, 갤러리 등과 같은 여러 CSS 모듈을 포함하지만 다음 섹션에서 모듈에 대해 더 자세히 설명하겠습니다. 레이아웃으로 분할할 수 있는 항목을 보기 위해 웹 페이지의 예를 살펴보겠습니다.

SMACSS를 사용하여 머리글, 기본 및 바닥글 레이아웃 스타일로 구성할 수 있는 웹 페이지의 예

여기에 헤더, 메인, 푸터가 있습니다. 이러한 레이아웃은 상단 헤더에 링크 및 로고, 메인에 상자 및 기사, 푸터에 링크 및 저작권과 같은 모듈이 있습니다. 페이지에서 반복되지 않고 고유하기 때문에 일반적으로 레이아웃에 ID 선택기를 제공합니다.

또한 레이아웃 스타일에 대한 규칙을 모듈 스타일과 구별하기 위해 문자 l 을 접두사로 사용해야 합니다. 일반적으로 여기에서 테두리, 정렬, 여백 등과 같은 레이아웃과 관련된 항목의 스타일을 지정합니다. 또한 페이지의 해당 부분 배경이 레이아웃에 특정한 것처럼 보이지 않더라도 의미가 있을 수 있습니다.

다음은 표시 방법의 예입니다.

 #header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

적절한 클래스를 해당 자식에 추가하거나 해당 텍스트를 정렬하여 요소를 쉽게 배치하는 데 사용할 수 있는 정렬을 위해 이러한 도우미를 추가할 수도 있습니다.

다른 예로, 여백이 20px 인 .l-margin 과 같이 레이아웃 상자에 몇 가지 기본 여백을 사용할 수 있습니다. 그런 다음 일부 컨테이너, 요소, 카드 또는 상자에 대한 패딩을 원하는 곳에 l-margin 클래스를 추가하기만 하면 됩니다. 그러나 재사용 가능한 것을 원합니다.

 .l-full-width { width: 100%; }

다음과 같이 내부적으로 결합된 것이 아닙니다.

 .l-width-25 { width: 25px; }

잠시 시간을 내어 SMACSS의 명명 규칙에 대해 이야기하고 싶습니다. CSS의 네임스페이스 개념에 대해 들어본 적이 없다면 기본적으로 다른 요소와 구별하는 데 도움이 되도록 다른 요소의 시작 부분에 이름을 추가하는 것입니다. 그러나 왜 이것이 필요합니까?

다음 문제에 부딪힌 적이 있는지 모르겠습니다. CSS를 작성 중이고 무언가에 레이블이 있습니다. 원하는 스타일을 입력하고 클래스 .label 이라고 합니다. 그러나 나중에 다른 요소에 와서 .label 도 원하지만 스타일을 다르게 지정합니다. 따라서 두 개의 다른 항목은 이름이 같습니다. 즉, 이름 충돌입니다.

네임스페이스는 이 문제를 해결하는 데 도움이 됩니다. 궁극적으로 그것들은 한 수준에서 같은 것으로 불려지지만 서로 다른 네임스페이스(다른 접두사)를 가지므로 두 가지 다른 스타일을 나타낼 수 있습니다.

 .box--label { color: blue; } .card--label { color: red; }

기준 치수

앞서 언급했듯이 SMACSS 모듈은 페이지에서 재사용할 수 있는 더 작은 코드 비트이며 단일 레이아웃의 일부입니다. 이것은 한 페이지에 많은 것들이 있을 것이기 때문에 별도의 폴더에 저장하려는 CSS의 일부입니다. 그리고 프로젝트가 성장함에 따라 폴더 구조 모범 사례를 사용하여, 즉 모듈/페이지별로 분할할 수 있습니다.

SMACSS 및 Sass를 사용하는 파일/폴더 계층 구조의 예

그래서 이전 예에서 우리는 그 자체로 모듈이 될 수 있는 기사를 가지고 있었습니다. 여기서 CSS는 어떻게 구성되어야 합니까? title 과 text 자식 요소를 가질 수 있는 .article 클래스가 있어야 합니다. 따라서 동일한 모듈에 유지하려면 자식 요소에 접두사를 추가해야 합니다.

 .article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

모듈 접두사 뒤에 두 개의 하이픈을 사용하고 있음을 알 수 있습니다. 그 이유는 때때로 모듈 이름에 big-article 과 같이 두 단어 또는 고유한 접두사가 있기 때문입니다. 어떤 부분이 자식 요소인지 알려주려면 두 개의 하이픈이 필요합니다. 예를 들어 big-article-title 을 big-article--title 및 big-article--text 와 비교합니다.

또한 특정 모듈이 페이지의 많은 부분을 차지하는 경우 모듈 내부에 모듈을 중첩할 수 있습니다.

 <div class="box"> <div class="box--label">This is box label</div> <ul class="box--list list"> <li class="list--li">Box list element</li> </ul> </div>

여기 이 간단한 예에서 box 가 모듈이고 list 이 그 안에 있는 또 다른 모듈임을 알 수 있습니다. 따라서 list--li 는 box 가 아니라 list 모듈의 자식입니다. 여기서 핵심 개념 중 하나는 각 CSS 규칙당 최대 두 개의 선택기를 사용하는 것이지만 대부분의 시나리오에서는 접두사가 있는 선택기를 하나만 사용합니다.

이렇게 하면 규칙이 중복되는 것을 방지하고 동일한 이름을 가진 자식 요소에 추가 선택기를 사용하여 속도를 향상시킬 수 있습니다. 그러나 이것은 또한 우리가 원하지 않는 !important 스타일 규칙을 사용하는 것을 피하는 데 도움이 됩니다. 이는 잘못 구조화된 CSS 프로젝트의 표시입니다.

양호(단일 선택기 참고):

 .red--box { background: #fafcfe; } .red-box--list { color: #000; }

나쁨(선택자 내 반복 및 참조 방법 겹침에 유의):

 .red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

상태

SMACSS에서 정의하는 상태는 다양한 동적 상황에서 모듈이 어떻게 보이는지 설명하는 방법입니다. 따라서 이 부분은 실제로 상호 작용을 위한 것입니다. 요소가 숨겨지거나 확장되거나 수정된 ​​것으로 간주되는 경우 다른 동작을 원합니다. 예를 들어 jQuery 아코디언은 요소의 콘텐츠를 볼 수 있거나 볼 수 없는 경우를 정의하는 데 도움이 필요합니다. 특정 시간에 요소의 스타일을 정의하는 데 도움이 됩니다.

상태는 레이아웃과 동일한 요소에 적용되므로 이전 규칙이 있는 경우 이를 무시하는 추가 규칙을 추가합니다. 상태 규칙은 규칙 체인의 마지막 규칙이므로 우선 순위가 지정됩니다.

레이아웃 스타일과 마찬가지로 여기에서 접두사를 사용하는 경향이 있습니다. 이것은 우리가 그들을 인식하고 우선순위를 부여하는 데 도움이 됩니다. 여기서 is-hidden 또는 is-selected 에서와 같이 is 접두사를 사용합니다.

 <header> <ul class="nav"> <li class="nav--item is-selected">Contact</li> <li class="nav--item">About</li> </ul> </header>
 .nav--item.is-selected { color: #fff; }

여기서 !important 가 사용될 수 있습니다. 상태는 렌더링 시간이 아니라 JavaScript 수정으로 자주 사용되기 때문입니다. 예를 들어 페이지 로드 시 숨겨진 요소가 있습니다. 버튼 클릭 시 표시하고 싶습니다. 그러나 기본 클래스는 다음과 같습니다.

 .box .element { display: none; }

따라서 이것을 추가하면:

 .is-shown { display: block; }

JavaScript를 통해 .is-shown 클래스를 요소에 추가한 후에도 숨겨진 상태로 유지됩니다. 이는 첫 번째 규칙이 2단계 수준이고 이를 무시하기 때문입니다.

따라서 대신 다음과 같이 상태 클래스를 정의할 수 있습니다.

 .is-shown { display: block !important; }

이것이 페이지의 초기 로드에만 적용되는 레이아웃 수정자와 상태 수정자를 구별하는 방법입니다. 이것은 최소 선택기의 장점을 유지하면서 작동합니다.

주제

이것은 기본 색상, 모양, 테두리, 그림자 등의 규칙을 포함하는 데 사용되므로 가장 명확해야 합니다. 대부분 이들은 전체 웹사이트에서 반복되는 요소입니다. 우리는 그것들을 만들 때마다 재정의하고 싶지 않습니다. 대신 나중에 기본 요소에만 추가하는 고유한 클래스를 정의하려고 합니다.

 .button-large { width: 60px; height: 60px; }
 <button class="button-large">Like</button>

이러한 SMACSS 테마 규칙을 기본 규칙과 혼동하지 마십시오. 기본 규칙은 기본 모양만 대상으로 하고 기본 브라우저 설정으로 재설정하는 것과 같은 경향이 있는 반면 테마 단위는 최종 모양을 제공하는 스타일 유형에 가깝습니다. 이 특정 색 구성표에 고유합니다.

테마 규칙은 사이트에 서로 다른 상태에서 사용되는 단일 스타일 또는 두 가지 이상의 테마가 있는 경우에도 유용할 수 있으므로 테마 전환 버튼과 같이 페이지의 일부 이벤트 중에 쉽게 변경하거나 교체할 수 있습니다. 최소한 모든 테마 스타일을 한 곳에 보관하므로 쉽게 변경하고 깔끔하게 정리할 수 있습니다.

CSS 구성 방법론

이 CSS 아키텍처 아이디어의 핵심 개념 중 일부를 다루었습니다. 이 개념에 대해 더 알고 싶다면 SMACSS의 공식 웹사이트를 방문하여 더 자세히 알아볼 수 있습니다.

예, OOCSS 및 BEM과 같은 고급 방법론을 사용할 수 있습니다. 후자는 거의 완전한 프론트엔드 워크플로와 해당 기술을 다룹니다. BEM 선택기는 어떤 사람들에게는 훌륭하게 작동할 수 있지만 어떤 사람들은 너무 길고 압도적이며 사용하기가 너무 복잡하다고 생각할 수도 있습니다. 더 쉽게 선택하고 워크플로에 통합할 수 있는 단순한 것이 필요하고 귀하와 귀하의 팀을 위한 기본 규칙을 정의하는 것이 필요한 경우 SMACSS가 완벽합니다.

새로운 팀 구성원은 이전 개발자가 수행한 작업을 쉽게 이해할 수 있을 뿐만 아니라 코딩 스타일의 차이 없이 즉시 작업을 시작할 수 있습니다. SMACSS는 CSS 아키텍처일 뿐이며 주석에 표시된 대로 수행합니다. 그 이상도 이하도 아닙니다.