복잡하고 확장할 수 없는 CSS 작성을 중지하는 방법

"나는 4개의 css 파일을 가지고 있는데, 모두 10000여 줄의 코드가 있다. 일이 어떻게 이렇게 커질 수 있니?"
CSS 파일은 곧 제어되지 않습니다.
꼭 이럴 필요는 없어요.
보다 모듈적이고 유연한 코드를 작성할 수 있도록 운영 가능한 CSS 기술을 자세히 살펴보겠습니다.

Technique 1: Leverage inheritance in CSS

Technique 2: The power of the elements

Technique 3: Use a CSS methodology

기술 1: CSS에서 상속 활용

설령 네가 이전에 그 성명을 사용한 적이 있다는 것을 안다 하더라도, CSS에서 자신이 성명을 반복하는 것을 발견했니?
CSS의 상속을 이해하는 데 도움이 될 수 있습니다.

Inheritance in CSS은 이 양식들이 하류와 양식의 후손 요소에 침투할 수 있도록 높은 단계에서 양식을 정의할 수 있도록 합니다.
간단한 엔트리급 CSS 기술입니다.
그러나 사람들이 상속의 본질에 대해 잘 이해하지만 상속 규칙은 충분히 이용되지 않는다고 생각한다.
만약 적절하게 사용된다면, 장기적으로 보면, 그것은 당신을 위해 수백 줄의 코드를 절약할 수 있습니다.
대부분의 웹 사이트에서는 최상위 수준에서 모든 HTML 요소가 일관된 스타일을 갖습니다.

html {
 background-color: #fafafa; 
 color: #424242;
 font-family: 'Helvetica';
 font-size: 100%;
 font-weight: 300;
 line-height: 1.5;
 box-sizing: border-box;
}

상속하는 것을 잊지 마라

위의 그림에서 보듯이 뿌리에 스타일을 추가하는 것은 좋은 시작이다.
그러나 일부 HTML 요소(예: <input> 또는 <textarea>)는 기본적으로 정의된 스타일을 상속하지 않습니다.
이것은 루트 디렉터리에 font-family: Helvetica을 설정하면 위의 그림과 같이 <input>의 글꼴은 이 스타일을 계승하지 않고 브라우저의 기본 글꼴 계열을 사용합니다.
기본적으로 상속되지 않는 속성의 요소에 다음 설명을 추가하여 무시할 수 있습니다: font-family: inherit.
모든 요소가 루트 요소에 정의된 스타일을 계승하는지 확인하는 일반적인 방법은 일반 선택기 * {}을 사용하고 inherit 값을 특정 속성에 적용하는 것입니다.

* { 
 font-family: inherit;
 line-height: inherit;
 color: inherit;
 box-sizing: inherit;
}

중요 주의사항: font-size과 font-style 같은 속성은 위의 유니버설 선택기 세션에 포함되지 않습니다. 이syle을 사용하면 사용자 프록시 스타일을 덮어쓰기 때문입니다.
예를 들어 일반 선택기에 font-size: 20px 스타일을 설정하면 사용자 에이전트 font-size의 모든 제목 표시(h1, h2, h3...)를 덮어씁니다.
다음은 상속 규칙을 활용하여 CSS 행을 저장하는 데 사용되는 일반적인 선언의 예입니다.

html {
 background-color: #fafafa; 
 color: #424242;
 font-family: Georgia, serif;
 font-size: 100%;
 font-weight: 300;
 line-height: 1.5;
}

* { 
 font-family: inherit;
 line-height: inherit;
 color: inherit;
}

이제 조형 요소에 대해 깊이 있게 토론해 봅시다.

기교2: 원소의 힘

루트의 스타일을 설정하는 것보다 요소 선택기에 스타일을 직접 추가하는 것이 CSS 파일을 간소화하고 효율적으로 유지하는 좋은 방법입니다.

예를 들어 블로그와 같은 내용이 밀집된 사이트의 경우 레이아웃 선택기를 다음 스타일로 설정할 수 있습니다.

p {
 /* paragraph styles are not required 
 as they are inherited from the root */
}

h1, h2, h3, h4, h5, h6 {
 font-family: Helvetica, sans-serif;
 font-weight: 700;
 line-height: 1.3;
}

h1 {
 font-size: 2rem;
 max-width: 32rem;
}

h2 {
 font-size: 1.75rem;
 max-width: 24rem;
}

h3 {
 font-size: 1.5rem;
 max-width: 20rem;
}

h4 {
 font-size: 1.25rem;
 max-width: 16rem;
}

이것은 두 가지 장점이 있다.

HTML은 더욱 깨끗해질 것입니다. 스타일은 HTML 요소 선택기에 적용된 것입니다. (즉 HTML 태그에 클래스를 추가할 필요가 없습니다.)

의 경우 사용자 정의 클래스 추가의 필요성을 없애고 CSS 스타일시트를 간소화하며 확장성을 높일 수 있습니다

저는 이를 프로젝트에서 스타일을 설정하는 핵심적인 기초로 보고 구성 요소를 설계하고 사이트를 구축하는 데 더욱 복잡한 부분에 좋은 기반을 다지는 것을 좋아합니다.

기술 3: CSS 방법 사용

CSS 상속 규칙과 스타일 요소 선택기를 사용하면 이것만 할 수 있습니다.
당신의 사이트에서 종류를 사용하여 각종 구성 요소와 레이아웃을 설계하는 것은 피할 수 없는 것이다.
따라서 우리는 CSS의 효율성과 조직성을 유지하기 위해 모듈화되고 유연한 방식으로 CSS를 작성하는 시스템을 필요로 한다.
이것이 바로 CSS methodology의 출처다.

CSS 방법은 일치하는 명명 약정 그룹입니다. 개발팀은 이 약정을 따라 일치하고 재사용할 수 있으며 시간에 따라 확장된 CSS를 작성할 수 있도록 합니다.
일부 가장 유행하는 방법은 BEM, SMACSS, OOCSS과 Atomic CSS을 포함한다.
이런 방법 중에서 경계원법은 극점 위치를 as noted from the State of CSS 2019방법 중 가장 많은 방법으로 채택한 것 같다.
그러면 우리는 국경원법에 전념합시다. 그것이 무엇인지, 그리고 어떻게 프로젝트에서 그것을 실시하기 시작했는지.

경계원법은 블록 원소 수정기를 대표하는데 이것은 세 개의 핵심 기둥이다.
어셈블리를 생성할 때 각 버팀목에는 다른 명명 규칙이 있습니다.

블록은 구성 요소 자체입니다. 예를 들어 카드 구성 요소(예를 들어 .card)

원소는 블록 내에 거주하는 하위 원소로 명칭 약정 [Block]__[Element](예를 들어 .card__title)

수식자는 블록 또는 요소 디자인의 변체로 명칭 약정 [Block]--[Modifier](예를 들어 .card--dark)

카드 구성 요소를 꾸준히 사용하는 실제 사례를 살펴보겠습니다.
이 예에서 .card은 블록이다..card 블록의 하위 요소가 명명 약정 [Block]__[Element]을 사용하는 것을 볼 수 있습니다.
예를 들어 카드 이미지에 사용되는 클래스는 .card__image입니다.
이제 Modifier의 예제를 살펴보겠습니다.
수정기([Block]--[Modifier])가 명명약정 .card--dark을 사용한 것을 볼 수 있습니다.
여기서 주의해야 할 것은 수정기를 사용할 때 블록이 아닌 블록과 함께 사용할 수 있다는 것이다.
위의 코드 펜에서 볼 수 있듯이 수정기 클래스 .card--dark은 블록 클래스 .card을 대체하지 않습니다.
더 많은 코드 예시와 경계원법을 깊이 연구하는 정보에 관해서, 나는 Sparkbox's의 문장을 볼 것을 건의합니다.

총결산

CSS 스타일시트를 만든 지 오래되었을지도 모르지만, 고개를 돌릴 때, 종종 "빌어먹을, 내 CSS는 정말 엉망이야!"라고 말한다.
만약 실현된다면 본고에서 소개한 기술은 이러한 느낌을 없애는 데 도움이 될 것입니다. 당신은 모듈화되고 확장 가능한 CSS 대가가 될 것입니다.
요약하면 오늘 사용할 수 있는 3가지 CSS 기술은 다음과 같습니다.

계승이 CSS에서 어떻게 작동하는지 이해하고 이를 당신의 우세에 사용합니다

스타일 요소 선택기는 당신의 디자인에 튼튼한 기초를 닦아 줍니다.

은 BEM과 유사한 CSS 방법을 사용하여 모듈화되고 유연한 방식으로 구성 요소를 설계한다.

당신은 어떻게 생각합니까?그다지 어수선하지 않은 CSS를 쓰는 기교/전략이 있습니까?