Long-standing CSS methodologies

오래된 CSS 방법론

CSS 방법론 (또는 명명 규칙) 은 이야기 꺼내기에 오래됐고 지루합니다 😏. 여기에는 두 가지 이유가 있습니다: CSS는 스타일시트 관리 방법에 대한 문서를 통해 높은 수준을 자랑하고, 사람들은 JS 속 CSS로 옮겨가고 있기 때문입니다.

 

그러나 이번 주제는 매우 중요하고 당신이 좋든 싫든 무시될 수 없는 내용입니다. JS 속 CSS는 새롭고 스타트업과 인디 제작자들에 의해 사용되지만, 이 CSS 방법론은 기업 어떤 곳에서든 사용되기 때문입니다.

 

동기

CSS 동작 방법에서 살펴봤듯, CSS의 문제점은 개발자들이 효과적인 동작을 위해 높은 정확도의 수준을 스스로 지속시켜야 한다는 것입니다. 언어는 단순하고 배우기 쉽지만, 유지보수와 확장성에 용이하게 사용하는 게 쉽지 않습니다.

 

슬프게도, 대부분의 CSS 스타일시트는 때때로 어떤 구조나 명명 규칙 없이 개발되곤 합니다. 웹 프로젝트가 성장할 수록, 당신이 코드의 구조를 고려하지 않는다면 CSS를 관리하는 건 금방 복잡해집니다. 불필요한 중복과 나쁜 퍼포먼스는 이에 대한 결과입니다.

 

CSS의 등장 이후, 커뮤니티는 많은 지침, 표준, 전처리 장치, 방법론을 통해 위에 기술된 CSS 언어의 문제점을 해결하려 노력했습니다.

CSS 방법론은 내장된 스코프 동작 원리가 결여되는 CSS를 더 잘 관리하기 위해 개발자들이 사용하는 명명 규칙입니다.

 

컴퓨터 공학에는 두 가지 어려움이 있다: 캐시 무효화와 네이밍 문제다 — Phil Karlton

 

 

기업의 사랑 BEM

BEM는 방법론이자, 명명 시스템이자, 관련된 툴을 모아 놓은 것입니다. Yandex 팀에 의해 만들어졌습니다. 이 이름은 방법론의 중요 요소 — 블록(Block), 요소(Element) 그리고 모디파이어(Modifier)의 앞 글자를 따서 만들었습니다.

 

• 블록(Block): 그 자체로 의미 있는 독립된 개체입니다. ( header , container , menu )
• 요소(Element): 독립적인 의미가 존재하지 않고 블록 자체로 의미가 종속되어 있는 블록의 일부분입니다. ( menu item , list item , checkbox caption )
• 모디파이어(Modifier): 블록 또는 요소의 형태 또는 동작을 변화시킬 수 있는 표시입니다. ( disabled , highlighted , enabled , checked )

 

BEM은 다음의 규칙을 강제합니다.

 

• 요소들은 블록 이름과 __ (밑줄 두 번)을 통해 구분되어 이름 공간을 갖는 반면 모디파이어는 —(붙임표 두 번)을 통해 구분됩니다.
• BEM을 사용할 때는 CSS 태그 또는 ID 선택자를 사용하면 안 됩니다.

 

.form {
}
.form--theme-xmas {
}
.form--simple {
}
.form__input {
}
.form__submit {
}
.form__submit--disabled {
}

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

 

BEM은 다음과 같은 이점 때문에 수 년 동안 기업에서 사용되고 있습니다:

 

• BEM 방법론은 당신의 CSS 코드를 단순하고 이해하기 쉽게 유지할 수 있는 견고한 구조를 제공합니다.
• 엄격한 명명 규칙 덕분에, 다른 CSS 이름과 충돌될 일이 없습니다. 웹 사이트 개발에 참여하는 모두가 단 하나의 코드베이스로 작업하고 동일한 언어로 소통합니다.
• 모든 것이 클래스고 아무 것도 중첩되지 않는 다는 사실이 CSS의 특수성을 쉽고 진입 장벽이 낮게 만들어줍니다. 이는 곧 CSS의 특수성 때문에 스스로 괴로워하지 않는다는 걸 의미합니다.

 

BEM이 제공하는 건 클래스 이름을 길게 만들고, 요소가 블록 제목에 의존적이게 하며 모든 클래스를 전역으로 선언하는 것입니다. 이건 말 그대로 전혀 도움이 되지 않으며 오히려 프로젝트 마크업에 나쁜 결과를 초래합니다. 아마 BEM의 단점 때문에 사용을 꺼려할 수 있습니다.

 

• 늘어지고 PHP와 같은 형태의 클래스 이름은 마크업의 가독성을 해칩니다.
• BEM의 모든 클래스가 전역이라는 사실은 모디파이어의 상속을 어렵게 만듭니다.
• 블록을 통해서만 마크업을 암시하는 건 의미론 사용을 못하게 합니다.

 

반항적이고 개성 강한 Atomic CSS

Atomic CSS는 고집스럽지 않습니다; 이것은 단순히 단일-목적 스타일링 단위를 나타내는 클래스들의 집합으로 정의됩니다. 이것은 종종 축약되며 영향을 미치는 콘텐츠에서 벗어난 클래스 이름에 대해 엄격한 라이브러리입니다.

 

Atomic CSS는 가시적인 함수에 기반한 이름을 사용하는 작은, 단일-목적 클래스를 선호하는 CSS 아키텍처에 관한 접근법이다.

 

 

Atomic CSS는 "스타일 시트 외부"에서 스타일링 이점을 발견하는, 마크업과 스타일을 한 곳에서 작성하며 Atomic 아키텍처의 이점을 활용하길 원하는 개발자들을 위한 것입니다. 이것은 우선순위의 전환입니다. 당신은 스타일 시트가 아닌 구성요소를 유지 보수하게 됩니다.

 

Atomic CSS는 입지를 다지기 시작했습니다:

 

• 모든 구성요소에 대한 규칙 대신, 세분화되고 재사용 가능성이 높은 스타일
• 느슨한 명시도를 가진 선택자를 사용하여 충돌 감소
• 초기 규칙 정의를 통한 HTML 구성요소 신속 개발
• 재정의를 쉽게 만들어주는 클래스의 느슨한 명시도

 

<button class="b1 b--green bg-green white br-5 ma-10 f3 ttu fw-400 padding-10">
  Click Me!
</button>

Atomic CSS는 특정한 라이브러리 또는 프레임워크가 아닌 아키텍처 철학을 의미하며, 정적(e.g. Tachyons)이고 프로그래밍적인(e.g. ACSS) 접근 방식을 모두 포함합니다. 연관된 이론과 관련하여 정확한 정의와 정보를 위해서는 Atomic CSS가 무엇인지 확실히 정의해봅시다를 참고하시면 됩니다.

 

OOCSS

객체 지향 CSS는 2008년 웹 개발자 Nicole Sullivan에 의해 제안 됐습니다. 그녀의 목표는 Java나 Ruby와 같은 프로그래밍 언어에서 유명해진 객체 지향 디자인 원칙을 적용하여 더 관리가 수월한 동적인 CSS를 만드는 것이었습니다.

 

일반적으로 CSS는 여러 페이지 요소에 접근 가능하고 재사용 가능한 것을 고려하기 때문에 객체 지향적입니다.

 

OOCSS의 목적은 코드를 재사용하는데 기여하고, 궁극적으로, 추가와 유지 보수를 하는 데 있어 더 빠르고 효율적인 스타일시트를 만드는 데 기여하는 것입니다. OOCSS의 두 가지 핵심 원칙은 아래와 같습니다:

 

• 구조와 스킨 분리: 이것은 반복적인 visual features (넓이, 높이, 마진, 패딩, 기타 등등) 기능들을 skins (색깔, 폰트, 명암, 그라데이션, 기타 등등) 로 나누어 다양한 객체와 혼합하고 일치시키게 정의함으로써 많은 양의 코드 없이 시각적 다양성을 보여줄 수 있게 합니다.
• 컨테이너와 콘텐츠 분리: 이것은 잘 사용되지 않는 지역-의존적 스타일을 의미합니다. 당신이 어디에서 사용하더라도 객체는 동일한 모양입니다.

 

<a href="#" class="btn btn-small btn-salmon">Click me!</a>
<a href="#" class="btn border btn-medium btn-mint">Click me!</a>
<a href="#" class="btn border box-shadow btn-small btn-blue nice">Click me!</a>

시간이 흐르고, OOCSS 기법은 주어진 문서에서 수십 번 적용되는 개별 속성을 가진 몇 백 개의 CSS 클래스를 다룰 수 있게 되었습니다. 사람들은 너무 많은 클래스가 HTML에 사용되는 장황함에 관한 문제를 겪었기에, 비의미론에서 사용되는 걸로 권장 됐습니다.

 

SMACSS

SMACSS는 확장 가능한 모듈 아키텍처 CSS를 의미하며, 이것은 CSS를 사용할 때 사이트 개발에 관한 일관된 접근 방식을 문서화한 스타일 지침에 가깝습니다.

 

SMACSS의 핵심 내용은 범주화입니다. CSS 규칙을 범주화하면, 패턴을 발견할 수 있고 각 패턴들을 통해 더 나은 사례를 정의할 수 있습니다. 범주화에는 다섯 개의 유형이 존재합니다.

 

• 기반: 배타적인 단일 요소 선택자, 속성 선택자, 의사-클래스 선택자, 하위 선택자 또는 인접 선택자
• 레이아웃: 여러 섹션으로 나뉜 페이지
• 모듈: 디자인 중 재사용 가능하고 모듈화 된 부분
• 상태: 화면에서의 모듈 또는 레이아웃 모양에 대한 설명
• 테마: 모듈 또는 레이아웃의 모양 설명

 

특정 그룹에 속한 클래스에 이름공간을 사용하고, JavaScript에서 사용되는 클래스에는 별도의 이름공간을 사용하는 걸 권장합니다.

 

다른 경쟁력 없는 해결책

ITCSS - CSS Wizrdry에서 만든 합리적이고, 확장 가능한 관리형 CSS 아키텍처

 

MCSS - 다중 계층 CSS 조직 방법론은 당신의 CSS 구조를 위한 지침입니다. 이러한 스타일의 코드 작성은 foundation , base , project 그리고 cosmetic 이라고 불리는 여러 층으로 스타일을 나눌 것을 권장합니다.

 

AMCSS - 속성 모듈 (AM__Attributes Modules) 은 스타일 요소의 클래스 대신 HTML의 속성과 그 값들을 사용하는 기법입니다.

 

FUN - 이것은 선택자의 편평한 계층 구조, 다용도 스타일, 이름 공간 구성요소를 의미합니다. 이 접근법은 프로젝트와 코드 구조에 대해 꽤 많은 요구 사항을 부과하며, 선택자를 기록하는 선호 형태와 마크업에서 그것들이 사용되는 방식만을 정립합니다.

 

결론

CSS 방법론은 몇 년 동안 안정적인 상태입니다. BEM이 이들 중 선두에 있는 반면, Atomic CSS 또한 완전히 새로운 다용도-클래스-기반 철학을 통해 입지를 다지기 시작했습니다. 다른 방법론들은 불완전하고 점점 잊혀지고 있습니다.

 

단순함은 곧 정교함의 극치다.

 

 

끝으로, 우리는 아마 CSS를 작성하는 단 하나의 진리를 찾을 수는 없겠지만, 계속해서 방법을 연구할 것입니다. 우리는 아마 다양한 CSS 프레임워크, 방법론 그리고 전처리 기법들을 혼합한 복잡한 해결책으로 귀결할 것입니다.

 

저는 오랜 기간 BEM을 사용하다가 JS 속 CSS로 바꿨는데, React Native에서도 동일한 스타일 기법을 사용할 수 있었기 때문에 제가 생각했던 것보다 훨씬 더 만족스럽게 사용 중입니다.

---

원문

https://ageek.dev/css-methodologies

Long-standing CSS Methodologies | AGEEK

---

단어

1. forethought
   • careful thought to make sure that things are successful in the future
2. redundancy
   • situation when somebody has to leave their job because there is no more work available for them
   • the state of not being necessary or userful
3. inception
   • the start of an institution, an organization, etc.
4. specificity
   • the quality of being specific
5. dependable
   • that can be relied on to do what you want or need
6. restrain
   • to stop somebody/something from doing something, espeically by using physical force
   • to stop yourself from feeling an emotion or doing something that you would like to do
7. prolong
   • to make something last longer
8. imply
   • to suggest that something is true or that you feel or think something, without saying so directly
   • to make it seem likely that something is true or exists
9. rebellious
   • unwilling to obey rules or accept normal standars of behaviour, dress, etc.
10. maverick
    • (of a person) independent, with unusual opinions
11. granular
    • consissting of small granules; looking or feeling like a collection of granules
12. refer
    • to send somebody/something to somebody/something for help, advice or a decision
13. encompass
    • to include a large number or range of things
    • to surround or cover something completely
14. sane
    • having a normal healthy mind; not mentally ill
    • sensible and reasonable
15. stand for
    • to be an abbreviation or symbol of something
    • to support or represent something
16. incompetent
    • not having the skill or ability to do your job or a task as it should be done
17. sophistication
    • experience of the world and knowledge of fashion, culture and other things that people think are socially important
    • the quality in a machine or system of being clever and complicated in the way that it works or is presented