CSS 구조 (BEM, OOCSS, SMACSS, ACSS) 와 우리가 왜 그것을 필요로 하는지.

JavaScript 원본 파일은 뚜렷한 구조를 가지고 있지만, CSS를 변경하려고 할 때 비구조화된 CSS가 무더기로 나타납니까?
어떤 CSS 속성을 추가하거나 수정해야 하는지 알고 있지만, 코드에서는 여러 곳에서 CSS 속성이 덮어쓰이고, 어떤 경우에는 !important개의 로고가 사용되기 때문에 조심해야 합니다.너는 코드를 수정하는 것을 두려워하고, 기존의 스타일을 파괴하는 것을 두려워한다.그래서 자연스럽게 당신은 새로운 규칙을 창조했다. 그것은 매우 높은 특이성을 가지고 당신이 처음 만났던 혼란을 증가시킬 뿐이다.
이것은 많은 항목이 직면한 문제다.
프로젝트를 확장하거나 새로운 전방 엔지니어가 팀에 가입할 때 프로젝트의 코드 라이브러리에서 CSS를 어떻게 조직하는지 이해하는 것은 매우 귀중하다.더 강력한 CSS 구조를 만드는 데 도움을 줄 수 있는 다양한 아이디어를 알려드리고 싶습니다.
강력한 CSS 아키텍처가 필요한 이유는 무엇입니까?
견고한 CSS 아키텍처는 프로젝트를 확장하고 확장하기 시작할 때 지원합니다.만약 이러한 기초가 어떠한 사고나 기획을 거치지 않았다면, 미래에 당신의 프로젝트는 실패할 가능성이 매우 높다.
나의 이 비유의 뜻은CSS는 JavaScript 오류처럼 시스템을 파괴할 수 없지만, 다른 문제가 생겨서 프로젝트 작업을 어렵게 할 수 있습니다.만약 엔지니어 팀이 프로젝트에 CSS를 추가하거나 변경할 자신이 없다면, 그들은 버그를 도입할 가능성이 더 높다.이러한 빈틈은 최종 사용자를 찾을 수 있고 프로젝트의 성공은 이로 인해 영향을 받을 수 있다.
프로젝트를 시작할 때, 나쁜 CSS를 작성하는 것이 삭제하는 것보다 훨씬 쉽기 때문에, 튼튼한 CSS 구조가 있어야 한다.
제 인상은 CSS가 전방 분야에서 다른 학과처럼 널리 존중받지 않는다는 것입니다.왜 우리는 이렇게 많은 시간을 들여 최신의 자바스크립트 프레임워크를 배워야 하지만 CSS에 대해 느슨한 이해를 견지해야 합니까?HTML과 CSS는 네트워크의 구성 부분이지만 일반적인 이해에 만족합니다.
이것은 내가 우리가 모두 범했다고 생각하는 잘못이다.이것은 내가 바꾸고 싶은 일이다.
우리는 어떤 CSS 구조를 사용할 수 있습니까?
내가 이 화제를 연구하기 시작했을 때 많은 CSS 구조가 매우 두드러졌다.그들은 다음과 같습니다.

경계원(블록 요소 수정기)

OOCSS(객체 대상 CSS)

SMACSS(CSS의 확장성 및 모듈식 아키텍처)

ACSS(원자 CSS)

나는 인터넷에 이미 우수한 자원이 있기 때문에 이런 것들을 너무 상세하게 묘사하고 싶지 않다.반대로, 당신은 아래에서 각 방법에 대한 간략한 설명과 각 방법에 대한 더 많은 정보를 찾을 수 있습니다.
BEM(블록 요소 수정기)란?
BEM은 Block Element Modifier를 대표하며 CSS를 디자인하는 방법으로 스타일 클래스를 만들 때 일치하는 명칭 약정을 사용하도록 권장합니다.
BEM이 권장하는 명명 규칙은 block-name__element-name--modifier-name입니다. 여기서 각 항목은 다음과 같습니다.

block-name은 설치해야 할 블록 스타일을 설명합니다.예: photo.

__element-name은 이 블록에 스타일을 설정해야 하는 요소를 설명한다.예: photo__image 또는 photo__caption

--modifier-name은 스타일을 설정하는 블록이나 요소의 수정기를 설명합니다.예: photo--large 또는 photo__image--black-and-white

BEM에 대한 자세한 내용은 BEM 101을 참조하시기 바랍니다.
OOCSS란 무엇입니까?
OOCSS는 대상을 대상으로 하는 CSS를 대표하고 추상적으로 구조와 시각적 양식을 분리하고 CSS의 중복을 없애는 디자인 방법이다.
OOCSS는 다음 예를 바꾸도록 격려할 것이다...

.button {
    padding: 10px 16px;
    color: blue;
}
.h1 {
    font-size: 2em;
    color: blue;
}

...이런 일...

.button {
    padding: 10px 16px;
}
.h1 {
    font-size: 2em;
}
.primary {
    color: blue;
}

우리의 새로운 추상을 통해 우리는'primary'클래스를 <button>과 <h1> 요소에 분배할 수 있으며'blue'의 색깔을 부여할 수 있다.이것은 우리가 스타일시트를 깔끔하게 유지하는 데 도움이 된다.
OOCSS에 대한 자세한 내용은 An Introduction To Object Oriented CSS (OOCSS)을 참조하시기 바랍니다.
SMACSS(CSS의 확장 및 모듈식 아키텍처)란?
SMACSS는 CSS의 확장성 및 모듈식 아키텍처를 나타냅니다.그것은 기초, 레이아웃, 모듈, 상태, 주제 등 다섯 가지 다른 유형에 따라 스타일을 구축해야 한다.

기본 스타일은 기본 CSS 스타일을 저장해야 합니다.이러한 스타일은 웹 사이트/응용 프로그램의 모든 요소에 사용됩니다.

레이아웃 스타일에는 페이지를 구조 어셈블리로 구분하는 요소의 스타일이 포함되어야 합니다.눈썹, 꼬리, 격자 등 요소의 스타일을 정의해야 합니다.

모듈 스타일은 사이트/응용 프로그램에서 다시 사용할 수 있는 요소의 스타일을 포함해야 합니다.

상태 양식은 사이트/응용 프로그램에서 서로 다른 요소의 각종 상태를 정의해야 한다.여기서는 '활성화된 것', '비활성화된 것', '성공한 것' 등의 스타일을 찾을 수 있다.

테마 스타일은 요소의 외관을 결정해야 합니다.그들은 기본적인 스타일을 초월하여 프로젝트의 브랜드와 스타일을 사이트/응용 프로그램에 주입하기 시작해야 한다.

SMACS에 대한 자세한 내용은 SMACSS.com의 작성자 온라인 가이드를 참조하십시오.
ACSS(원자 CSS)란?
ACSS는 HTML에서 사용할 수 있도록 많은 작은 CSS 유틸리티 클래스를 만드는 데 초점을 두고 있는 원자 CSS를 나타냅니다.이것은 OOCSS와 유사합니다. 왜냐하면 중복된 속성 - 값 쌍을 각자의 규칙에 분리하는 것을 권장하기 때문입니다.그러나 ACSS는 가능한 한 작은 단계에서 스타일을 만들 수 있도록 격려하기 때문에 OOCSS의 극단적인 버전으로 볼 수 있습니다.
다음은 원자 CSS를 사용하는 항목에서 이러한 규칙을 찾을 수 있는 스타일 규칙의 예입니다.

/* Colours */
.color-primary { color: blue; }
.color-secondary { color: purple; }

/* Margins */
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }

ACSS는 CSS 선택기의 이름 규약에 CSS 속성을 사용하는 것을 권장하기 때문에 OOCSS와 다릅니다.예를 들어 OOCSS에서 .primary이라는 선택기를 목표로 하고 요소의 색을 예쁜 파란색 음영으로 변경할 수 있습니다.ACSS에서는 .color-primary이라는 선택기를 대상으로 할 수 있습니다.
ACSS에 대한 자세한 내용은 Let’s Define Exactly What Atomic CSS is을 참조하십시오.
어떤 CSS 아키텍처를 선택해야 합니까?
간단한 대답은--괜찮다는 것이다.
상술한 각 서로 다른 체계 구조는 모두 긍정적인 면과 부정적인 면이 있다.사람마다 다른 견해가 있을 수 있다.
가장 중요한 것은 CSS를 작성하기 전에 팀에서 일관된 서식을 사용하는 것에 동의했는지 확인하는 것입니다.이런 격식은 위에서 언급한 체계 구조 중의 하나일 수도 있고, 서로 다른 체계 구조의 혼합일 수도 있으며, 또는 네가 직접 설계한 것일 수도 있다.
프로젝트를 담당하는 엔지니어링 팀은 새로 작성한 CSS가 선택한 스타일을 따르도록 이 형식을 이해해야 합니다.가장 좋은 것은 서면 문서에서 구조를 해석하는 것이다.팀에 합류한 신입 엔지니어는 당신이 선택한 체계 구조를 신속하고 쉽게 이해할 수 있어야 한다.
일관된 스타일 실행
일단 당신의 스타일을 어떻게 써야 하는지에 대해 규칙을 설정하면, 그것을 강제로 집행하려고 할 것이다.수동으로 완성하든 자동 프로세스를 통해 완성하든 코드 라이브러리의 CSS가 시간의 추이에 따라 일치하도록 확보해야 합니다.
코드 스타일을 수동으로 실행
git 작업 흐름에서pull 요청을 볼 때 코드 라이브러리에 새로 추가된 것을 검사해서 수동으로 이 작업을 수행할 수 있습니다.새 CSS 규칙을 추가하는 것을 보실 수 있습니다. 이 규칙은 !important 로고를 사용하거나 기존 유틸리티 함수를 사용하지 않고 새 코드를 만듭니다. 이 코드를 변경하는 것을 권장할 수도 있습니다.
만약 팀의 모든 구성원이 당신이 선택한 CSS 구조를 완전히 이해할 수 있다고 가정한다면 이것은 낙관적인 것입니다.인간은 오류를 범할 뿐만 아니라, 어떤 코드도 누설되지 않은 상황에서 모든 요청을 심사할 수 없다.
우리는 더 믿을 만한 것이 필요하다.
코드 스타일 자동 실행
JavaScript 코드를 보기 위해 linter를 사용할 수 있는 것처럼 CSS에서도 같은 작업을 수행할 수 있습니다.PostCSS는 엔지니어가 CSS를 작성하고 플러그인을 사용하여 이를 개선하거나 강화하는 데 도움을 주는 도구입니다.Post CSS는 CSS에 대한 다양한 조작을 돕는 일련의 플러그인을 제공합니다. 예를 들어 자동 접두사, linting, 미니메이션 등입니다.
이렇게 자동화 프로세스는 수동 코드 검사에서 발생하는 문제를 줄이고 팀으로 하여금 그들이 사용하고 있는 코드에 더 많은 관심을 가지게 할 수 있다.
저는 PostCSS repository을 방문하여 우편 서비스에 대한 더 많은 정보를 얻을 것을 건의합니다.
요약
프로젝트를 어떻게 설계하든지 간에, CSS를 잊지 않도록 해야 한다.새 엔지니어가 쉽게 파악할 수 있도록 CSS 코드의 일치된 스타일을 시도하고 유지해야 한다. 그리고 그들이 자신감 있게 변경할 수 있도록 해야 한다.이 규칙들이 기록되고 집행되도록 확보하는 것은 자동화하는 것이 가장 좋다.
만약 당신이 지금 이 시간을 투자하지 않는다면, CSS를 쓰는 방식을 관리하는 데 걸리는 시간은 장기적으로 직면할 수 있는 문제를 훨씬 초과할 것이다.너는 새로운 코드를 가지고 새로운 특성을 만들어야 한다.작은 실수가 엔지니어의 대부분의 시간과 정력을 차지하게 해서는 안 된다.
당신은 현재 어떤 새로운 CSS 구조와 도구를 발견했습니까?나는 평론 부분에서 너의 생각을 듣고 싶다.