CSS 아키텍처에 대해 알아보십시오 : Atomic CSS -Sitepoint

다음 발췌는 Tiffany Brown이 쓴 "CSS Master"라는 책에서 발췌 한 것입니다. 이 책은 전 세계 주요 서점에서 구입할 수 있으며 여기에서 전자 책 버전을 구입할 수도 있습니다.

BEM이 업계에서 사랑이라면 원자 CSS는 반항적 인 트렌드 세터입니다. Yahoo의 Thierry Koblentz는 2013 년 기사에서 CSS 모범 사례에 도전하는 Atomic CSS를 지명하고 설명했습니다. 이 클래스 이름은 일반적으로 약칭되며 영향을 미치는 것과 접촉하지 않습니다. 원자력 CSS 시스템에서는 클래스 이름이 무엇을하는지 알 수 있습니다. 적어도 스타일 시트에 사용 된 클래스 이름과 콘텐츠 유형 사이에는 관계가 없습니다. 예제를 사용하여 설명합시다. 아래는 기존 CSS 아키텍처라고 할 수있는 일련의 규칙입니다. 이 규칙 세트는 응용 프로그램의 내용을 설명하는 클래스 이름을 사용합니다 : 글로벌 메시지 상자, 성공 스타일, 경고 및 오류 메시지 상자 :

"사무실의 CSS 영웅이되기 : CSS 아키텍처 팁"을보고 구조화되고 유지 관리 가능하며 확장 가능한 CSS를 구축하는 법을 배우십시오! 이 과정 보기이 과정 보기이 과정보기 오류 메시지 상자를 만들려면 MSG 및 MSG-Error 클래스 이름을 모두 요소의 클래스 속성에 추가해야합니다.

각 선언이 자체 클래스가되는 원자 시스템과 비교해 봅시다.

CSS 코드의 양이 크게 증가했습니다. 이제 오류 메시지 구성 요소를 재현합시다. 원자 CS를 사용하면 태그가 다음과 같습니다

우리의 자국도 더 길다. 그러나 경고 메시지 구성 요소를 만들 때 어떻게됩니까?

<code>.msg {
  background-color: #a6d5fa;
  border: 2px solid #2196f3;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
}
.msg-success {
  background-color: #aedbaf;
  border: 2px solid #4caf50;
}
.msg-warning {
  background-color: #ffe8a5;
  border-color:  #ffc107;
}
.msg-error {
  background-color: #faaaa4;
  border-color: #f44336;
}</code>

두 클래스 이름이 변경되었습니다. BG-D와 BC-D는 BG-C 및 BC-C로 대체됩니다. 우리는 5 개의 규칙 세트를 재사용했습니다. 이제 버튼을 만들어 봅시다 :

봐! 여기서 우리는 4 개의 규칙 세트를 재사용하고 스타일 시트에 더 많은 규칙을 추가하는 것을 피했습니다. 강력한 원자 CSS 아키텍처에서 새로운 HTML 구성 요소 (예 : Post Sidebar)를 추가하면 더 많은 CSS를 추가 할 필요가 없습니다 (실제로는 일부 추가해야 할 수도 있음). Atomic CSS는 CSS에서 유틸리티 클래스를 사용하는 것과 비슷하지만 극단으로 가져갑니다. 구체적으로, IT :

<code><p class="msg msg-error">发生错误。</p></code>

각 구성 요소에 대한 규칙 세트를 작성하는 대신 매우 세밀하고 재사용 가능한 스타일을 만들어 CSS를 간결하게 유지하십시오. 낮은 특정 선택기 시스템을 사용하여 특정 충돌을 심각하게 줄입니다. 초기 규칙 세트가 정의되면 HTML 구성 요소가 신속하게 개발 될 수 있습니다

그러나 원자 CSS는 논쟁의 여지가 없습니다.

<code>.bg-a {
  background-color: #a6d5fa;
}
.bg-b {
  background-color: #aedbaf;
}
.bg-c {
  background-color: #ffe8a5;
}
.bg-d {
  background-color: #faaaa4;
}
.bc-a{
  border-color: #2196f3;
}
.bc-b {
  border-color: #4caf50;
}
.bc-c {
  border-color:  #ffc107;
}
.bc-d {
  border-color:  #f44336;
}
.br-1x {
  border-radius: 10px;
}
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}</code>

원자 CSS 에 대한 인수 원자 CSS는 CSS 작성에 대해 우리가 배운 거의 모든 것과 상반됩니다. 그것은 모든 곳의 붙여 넣기 스타일 속성만큼 나쁘게 느껴집니다. 실제로 이것은 원자 CSS 접근법의 주요 비판 중 하나입니다. 컨텐츠와 성능 사이의 경계를 흐리게합니다. 왼쪽에 요소를 떠 다니고 10 픽셀 마진을 추가하면 더 이상 요소가 왼쪽으로 떠 다니기를 원하지 않으면 어떻게해야합니까? 물론 한 가지 대답은 요소에서 FL 클래스를 제거하는 것입니다. 그러나 지금 우리는 HTML을 바꾸고 있습니다. CSS를 사용하는 모든 이유는 태그가 성능의 영향을받지 않으며 그 반대도 마찬가지입니다. (스타일 시트에서 .fl {float : left;} 규칙을 제거 하여이 문제를 해결할 수도 있지만 클래스 이름 FL의 모든 요소에 영향을 미칩니다). 그럼에도 불구하고 HTML을 업데이트하는 것은 클리너 CSS에 대한 비용을 지불하는 데 적은 가격 일 수 있습니다.

Kobleentz의 원래 기사에서 그는 .m-10 (마진 : 10px) 및 .p-10 (패딩 : 10px)과 같은 클래스 이름을 사용했습니다. 이 명명 규칙의 문제는 분명해야합니다. 5 픽셀 또는 20 픽셀 마진으로 변경한다는 것은 CSS 및 HTML을 업데이트해야한다는 것을 의미합니다. 그렇지 않으면 클래스 이름이 그 효과를 정확하게 설명하지 못하게 할 수 있습니다.

P-1X와 같은 클래스 이름을 사용하면 (이 섹션에 표시된대로)이 문제를 해결할 수 있습니다. 클래스 이름의 1x 부분은 정의 된 픽셀 수가 아닌 비율을 나타냅니다. 기본 채우기가 5 픽셀 인 경우 (예 : .p-1x {패딩 : 5px;}) .p-2x는 10 픽셀 채우기를 설정합니다. 그렇습니다. 이것은 클래스 이름이 무엇을하는지 설명하지 않지만 HTML을 업데이트하지 않고 CSS를 변경하거나 오해의 소지가있는 클래스 이름을 만들 수 있음을 의미합니다.

원자 CSS 스키마는 태그의 내용을 설명하는 클래스 이름을 사용하는 것을 방해하지 않습니다. 코드에 .Button-close 또는 .accordion-trigger를 추가 할 수 있습니다. 이 클래스 이름은 JavaScript 및 DOM 운영에 더 적합합니다.

BEM 및 원자 CSS

BEM은 CSS 및 HTML 모듈을 동시에 구축하는 많은 개발자가있을 때 가장 잘 작동합니다. 대규모 팀이 생성하는 버그와 버그를 방지하는 데 도움이됩니다. 이름 지정 규칙이 설명적이고 예측 가능하기 때문에 부분적으로는 잘 조정됩니다. BEM은 대규모 팀에게는 단지

가 아닙니다.

원자 CSS는 CSS 규칙 세트를 개발하는 소규모 팀 또는 엔지니어가있을 때 더 잘 작동하며 대규모 팀은 완전한 HTML 구성 요소를 구축합니다. 원자 CSS를 사용하여 개발자는 스타일 가이드 또는 CSS 소스 코드를 보면 특정 모듈에 필요한 클래스 이름 세트를 결정할 수 있습니다.

원자 CSS에 대한 faqs

원자 CSS와 전통적인 CSS의 주요 차이점은 무엇입니까? 기능적 CSS라고도하는 원자 CSS는 원자 또는 불가분의 조각으로 스타일을 분해하는 방법입니다. 각 클래스는 한 가지만 수행하며 여백을 설정하거나 글꼴 색상을 변경하는 것만 큼 간단 할 수 있습니다. 반면, 전통적인 CSS에는 일반적으로 특정 요소에 대한 특정 클래스를 만드는 것이 포함되며, 이는 스타일 시트 팽만감과 특정 충돌로 이어질 수 있습니다. 원자 CSS는 재사용 성을 향상시키고 클리너를 생산할 수 있으며 코드를 유지하기 쉽습니다. 원자 CSS는 성능을 어떻게 향상 시키는가?

원자 CSS는 스타일 시트의 크기를 줄임으로써 성능을 크게 향상시킬 수 있습니다. 각 클래스는 한 가지만 수행하므로 CSS에는 중복이 적습니다. 이로 인해 파일 크기가 작을 수 있으므로 사용자에게로드 시간이 빠릅니다.

원자 CSS는 대규모 프로젝트에 적합합니까?

예, 원자 CSS는 특히 대규모 프로젝트에 유리합니다. 일관성과 재사용 성을 향상시켜 코드 기반을 더 쉽게 유지 관리 할 수 ​​있습니다. 그러나 사고 방식의 변화가 필요하며 모든 팀이나 프로젝트에 적합하지 않을 수 있습니다.

원자 CSS에 대한 일반적인 비판은 무엇입니까?

일부 비평가들은 원자 CSS가 HTML을 읽기가 길고 읽기 어려울 수 있다고 생각합니다. 각 요소는 여러 클래스를 가질 수 있기 때문입니다. 스타일 정보가 이제 마크 업과 혼합되어 있기 때문에 다른 사람들은 우려의 분리를 깨뜨릴 것이라고 걱정하고 있습니다. 그러나 원자 CS의 지지자들은 이러한 우려가 클리너의 이점에 의해 상쇄되고 코드를 유지하기가 더 쉽다고 생각합니다.

내 프로젝트에서 원자 CSS를 어떻게 시작합니까?

ACSS, Tachyons 및 Tailwind CSS와 같은 원자 CSS를 시작하는 데 도움이되는 여러 라이브러리가 있습니다. 스타일을 원자력의 재사용 가능한 클래스로 나누어 원자 CSS 원칙을 자신의 스타일 시트에 통합 할 수도 있습니다.

원자 CSS는 SASS 이하의 사전 처리기와 함께 사용할 수 있습니까?

예, 원자 CSS는 SASS 이하의 CSS 전 처리기와 함께 사용할 수 있습니다. 그러나 원자 CSS는 특정 도구 나 프레임 워크가 아닌 방법이라는 것을 기억하는 것이 중요합니다. CSS를 작성하고 구성하는 방법에 관한 것입니다. CSS를 작성하는 데 사용하는 도구가 아닙니다.

원자 CSS는 부트 스트랩과 같은 CSS 프레임 워크와 호환됩니까?

예, 원자 CSS는 부트 스트랩과 같은 CSS 프레임 워크와 함께 사용할 수 있습니다. 그러나 원자 CSS의 주요 장점 중 하나는 재사용 성과 단순성을 향상시킴으로써 큰 ​​부풀어 오른 프레임 워크의 필요성을 감소 시킨다는 것입니다.

원자 CSS는 반응 형 디자인을 어떻게 처리합니까?

원자 CSS는 특정 화면 크기에 클래스를 사용하여 반응 형 디자인을 처리 할 수 ​​있습니다. 예를 들어, 큰 화면에서 여백을 설정하는 클래스와 작은 화면에서 다른 여백을 설정하는 다른 클래스가있을 수 있습니다.

원자 CSS는 React 또는 Vue와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니까?

예, 원자 CSS는 React 또는 Vue와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 실제로, 일부 개발자는 원자 CSS가 구성 요소 기반 아키텍처를 옹호하는 두 가지 프레임 워크를 잘 보완한다고 생각합니다.

원자 CSS에 대해 더 많이 배울 수있는 리소스는 무엇입니까?

원자 CSS에 대해 더 많이 배우는 데 사용할 수있는 많은 리소스가 있습니다. 일부 권장 리소스에는 ACSS 웹 사이트, CSS 트릭 및 중간 및 기타 코딩 블로그에 대한 다양한 기사 및 자습서가 포함됩니다.

위 내용은 CSS 아키텍처에 대해 알아보십시오 : Atomic CSS -Sitepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!