우리의 자국도 더 길다. 그러나 경고 메시지 구성 요소를 만들 때 어떻게됩니까? <div class="search">
<label for="s" class="search__label">Search for: </label>
<input type="text" id="s" class="search__input">
<button class="search__submit">Search</button>
</div>
로그인 후 복사
두 클래스 이름이 변경되었습니다. BG-D와 BC-D는 BG-C 및 BC-C로 대체됩니다. 우리는 5 개의 규칙 세트를 재사용했습니다. 이제 버튼을 만들어 봅시다 :
<div class="search search--inverse">
<label for="s" class="search__label search__label--inverse">Search for: </label>
<input type="text" id="s" class="search__input">
<button class="search__submit search__submit--inverse">Search</button>
</div>
로그인 후 복사
이봐! 여기서 우리는 4 가지 규칙 세트를 재사용하고 스타일 시트에 더 많은 규칙을 추가하지 않습니다. 강력한 원자 CSS 아키텍처에서 새로운 HTML 구성 요소 (예 : Post Sidebar)를 추가하면 더 많은 CSS를 추가 할 필요가 없습니다 (실제로는 더 추가해야 할 수도 있음). 원자 CSS는 CSS에서 유틸리티 클래스를 사용하는 것과 비슷하지만 한계에 도달합니다. 구체적으로, IT :
.search {
color: #333;
}
.search--inverse {
color: #fff;
background: #333;
}
.search__submit {
background: #333;
border: 0;
color: #fff;
height: 2rem;
display: inline-block;
}
.search__submit--inverse {
color: #333;
background: #ccc;
}로그인 후 복사
각 구성 요소에 대한 규칙 세트를 작성하는 대신 매우 세밀하고 재사용 가능한 스타일을 만들어 CSS를 간결하게 유지하십시오.
낮은 특정 선택기 시스템을 사용하여 특정 충돌을 심각하게 줄입니다.
초기 규칙 세트가 정의되면 빠른 HTML 구성 요소 개발을 수행 할 수 있습니다.
그러나 원자 CSS는 논쟁의 여지가 없습니다.
원자 CSS 에 대한 인수
원자 CSS는 CSS 작성에 대해 우리가 배우는 거의 모든 것과 상반됩니다. 그것은 모든 곳의 붙여 넣기 스타일 속성만큼 나쁘게 느껴집니다. 실제로, 원자 CSS 방법론의 주요 비판 중 하나는 그것이 내용과 프리젠 테이션 사이의 경계를 흐리게한다는 것입니다. 왼쪽에 요소를 떠 다니고 10 픽셀 마진을 추가하면 더 이상 요소가 왼쪽으로 떠 다니기를 원하지 않으면 어떻게해야합니까? 물론 한 가지 대답은 요소에서 FL 클래스를 제거하는 것입니다. 그러나 지금 우리는 HTML을 바꾸고 있습니다. CSS를 사용하는 모든 이유는 데모의 영향을받지 않도록하고 그 반대도 마찬가지입니다. (우리는 또한 스타일 시트에서 .fl {float : left;} 규칙을 제거하여 이것을 해결할 수 있지만, 이것은 클래스 이름 FL의 모든 요소에 영향을 미치지 만, HTML을 업데이트하는 것은 작은 가격이 지불 한 단순성을 위해 일할 수 있습니다. CSS. Kobleentz의 원래 기사에서 그는 .m-10 (마진 : 10px) 및 .p-10 (패딩 : 10px)과 같은 클래스 이름을 사용했습니다. 이 이름 지정 협약의 문제는 분명해야합니다. 5 픽셀 또는 20 픽셀 마진으로 변경한다는 것은 CSS 및 에서 내용 를 설명하는 클래스 이름을 사용하는 것을 방해하지 않습니다. 코드에 .Button-close 또는 .accordion-trigger를 추가 할 수 있습니다. JavaScript 및 DOM 작업의 경우 이러한 클래스 이름이 실제로 바람직합니다.
BEM 및 원자 CSS
BEM은 CSS 및 HTML 모듈을 동시에 구축하는 많은 개발자가있을 때 가장 잘 작동합니다. 대규모 팀이 생성하는 버그와 버그를 방지하는 데 도움이됩니다. 이름 지정 규칙이 설명적이고 예측 가능하기 때문에 부분적으로는 잘 조정됩니다. BEM은 대규모 팀에 적합 할뿐만 아니라 대규모 팀에게 적합합니다. 원자 CSS는 CSS 규칙 세트를 개발하는 소규모 팀 또는 엔지니어가있을 때 더 잘 작동하며 대규모 팀은 완전한 HTML 구성 요소를 구축합니다. 원자 CSS를 사용하면 개발자가 단순히 스타일 안내서 (또는 CSS 소스 코드)를보고 특정 모듈에 필요한 클래스 이름 세트를 결정할 수 있습니다.
자신의 길을 언제 갈지 배우십시오
실제로 CSS에는 여러 방법의 혼합이 포함될 수 있습니다. 레이아웃에 영향을 미치는 유틸리티 클래스 이름 외에도 내용이나 구성 요소를 설명하는 클래스 이름이있을 수도 있습니다. 태그를 완전히 제어 할 수없는 경우 (예 : CMS 사용) 이러한 방법 중 어느 것도 유용하지 않을 수 있습니다. 원하는 것을 달성하기 위해 길고 구체적인 선택기를 사용해야 할 수도 있습니다. CSS 아키텍처에 대한 FAQ : BEM 및 원자 CSS
BEM과 원자 CSS의 주요 차이점은 무엇입니까?
BEM (블록, 요소, 수정 자) 및 원자 CSS는 CSS 코드를 구성하고 구축하는 방법론입니다. BEM은 CSS를 쉽게 읽고 이해할 수 있도록 명명 컨벤션에 중점을 둡니다. 설계를 블록, 요소 및 수정 자로 나누어 CSS와 HTML 사이에 명확하고 엄격한 관계를 만듭니다. 반면에 원자 CSS는 시각적 기능을 반영하는 소규모 단일 목적 CSS 클래스를 작성하는 것입니다. 재사용 성을 장려하고 코드 금액을 줄이는 것을 목표로합니다.
BEM은 CSS의 확장 성을 어떻게 개선합니까?
BEM은 CSS와 HTML 사이에 명확하고 엄격한 관계를 제공함으로써 CSS의 확장 성을 향상시킵니다. 특정 명명 규칙을 사용하여 다른 요소 간의 관계를보다 쉽게 이해할 수 있습니다. 따라서 코드를 더 쉽게 유지하고 확장 할 수 있습니다. 새로운 기능을 추가하거나 기존 기능을 수정할 수 없기 때문에 아무것도 깨지지 않기 때문입니다.
동시에 BEM 및 Atomic CSS를 사용할 수 있습니까?
예, BEM 및 원자 CSS는 동시에 사용할 수 있습니다. 일부 개발자들은이 두 가지 접근법을 결합하면 두 세계의 최선을 달성 할 수 있음을 발견했습니다. BEM의 엄격한 명명 규칙은 CSS를 구축하는 데 사용될 수 있으며, 단일 목적 클래스의 원자 CSS는 단일 요소를 스타일링하는 데 사용될 수 있습니다. 이 조합은 고도로 정리되고 관리하기 쉬운 CSS 코드 기반을 생성 할 수 있습니다.
원자 CSS를 사용하면 어떤 이점이 있습니까?
원자 CSS는 많은 이점을 제공합니다. 재사용 성을 장려하여 작성해야 할 CS의 양을 크게 줄일 수 있습니다. 또한 동일한 클래스가 다른 구성 요소에 사용되므로 설계 일관성을 향상시킵니다. 또한, 원자 CSS는 각 클래스가 잘 정의 된 단일 목적을 가지므로 스타일 시트를보다 쉽게 관리하고 이해할 수있게 해줍니다.
BEM은 CSS 특이성 문제를 어떻게 처리합니까?
BEM은 개발자가 ID 선택기 대신 클래스 선택기를 사용하도록 장려함으로써 CSS 특이성 문제를 처리하는 데 도움이됩니다. 이로 인해 프로젝트 전체에 걸쳐 특이성이 일관성이있어 필요한 경우 스타일을 쉽게 다룰 수 있습니다. 또한 BEM의 명명 규칙은 어떤 요소가 관련되는지 명확하게 나타내어 예상치 못한 스타일 충돌의 가능성을 줄입니다.
원자 CSS는 대규모 프로젝트에 적합합니까?
예, 원자 CSS는 대규모 프로젝트에 적합합니다. 재사용 성과 단일 목적 수업에 중점을두면 프로젝트가 계속 증가하더라도 CSS를 관리 할 수 있습니다. 그러나 수업이 일관되고 의미가 있도록 엄격한 접근이 필요합니다.
BEM은 팀워크에 어떻게 도움이됩니까?
BEM의 명확하고 엄격한 명명 컨벤션을 통해 팀 구성원이 프로젝트에 참여할 때마다 CSS 코드를 더 쉽게 이해할 수 있습니다. 개발자는 다른 사람들이 작성한 코드를 쉽게 이해하고 수정할 수 있기 때문에 협업이 향상됩니다.
원자 CSS 사용의 잠재적 단점은 무엇입니까?
원자 CSS의 잠재적 인 단점은 HTML에서 많은 클래스로 이어질 수 있다는 것입니다. 이로 인해 HTML을 읽고 이해하기가 더 어려워 질 수 있습니다. 또한 원자 CSS는 클래스가 일관되고 의미가 있는지 확인하기 위해 엄격한 접근법이 필요합니다. 내 프로젝트에서 BEM 구현을 시작하는 방법은 무엇입니까?
BEM 구현을 시작하려면 설계를 블록, 요소 및 수정 자로 나누어야합니다. 그런 다음 BEM의 이름 지정 컨벤션을 사용하여 CSS 클래스의 이름을 지정하십시오. 이로 인해 CSS와 HTML 간의 명확한 관계가 생겨 코드가 더 쉽게 읽고 유지 관리 할 수 있습니다.
SASS 이외의 CSS 전 처리기와 함께 BEM 또는 Atomic CSS를 사용할 수 있습니까?
예, BEM 및 원자 CSS는 SASS 이하의 CSS 전 처리기와 함께 사용할 수 있습니다. 이 사전 처리기는 CSS 관리를보다 쉽게 만들 수 있으며 BEM 및 원자 CSS의 조직 원칙과 잘 어울립니다.
이 기사는 Tiffany의 새 책 "CSS Master, Second Edition"에서 발췌 한 것입니다. 우리는 두 가지 CSS 명명 방법론을 탐구 할 것입니다. 두 방법 모두 대규모 웹 사이트 및 대규모 팀의 개발 프로세스를 개선하기 위해 만들어졌지만 단일 팀에도 동일하게 적용됩니다. 자신에 따라 선택하거나 혼합 할 수 있습니다. 그들을 소개하는 목적은 자신의 CS를 작성하는 방법에 대해 생각하는 데 도움이됩니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
