CSS 방법론

CSS란 HTML 또는 XML로 쓰인 문서의 스타일을 나타내기 위해 사용되는 언어로서 문서의 구조와

스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 역할을 한다.

 

CSS가 등장하기 이전에는 각 HTML 요소의 전용 속성이나 style 속성으로 스타일을 일일이 지정하여야 했다.

그에 따라 같은 스타일 요소를 여러 페이지마다 사용하면 하나를 수정할 때마다 그만큼의 반복 수정이 필요했으며

HTML은 본래 문서 구조를 의미하므로 직접 스타일을 지정하는 것은 바람직하지 않다는 문제점이 있었다.

 

이후 CSS가 등장하고 css 파일에는 스타일을 기재하고 html에는 문서의 구조를 작성하게 되어 관심사의 분리가

이루어지게 됐고 유지보수에 유리함을 가져왔다.

 

CSS의 등장으로 문제가 모두 해결된 듯 싶었지만 CSS에도 문제점이 있었다.

CSS에서는 모든 것이 전역 범위이므로, 모든 스타일링이 서로 간섭할 가능성이 있었고 파일이 분리되어

있다 하더라도 이를 읽어들인 HTML에서는 모든 스타일링이 동일한 범위 안에 존재하게 되었다.

또한 웹사이트가 점점 복잡해지면서 유지보수가 용이한 CSS를 작성하는 것이 어려워졌으며

이를 해결하기 위한 여러 CSS방법론이 제시되었다.

---

1. OOCSS (Object Oriented CSS: 객체지향 CSS)

(1) 레고처럼 자유로운 조합이 가능한 모듈의 집합을 만든다.

(2) 모듈을 조합해 페이지를 만든다.

(3) 그에 따라 신규 페이지를 만드는 경우에도 추가적인 CSS를 만들 필요가 없다.

 

레고와 같은 모듈을 구현하기 위한 두 가지 원칙

a. 스트럭처(구조)와 스킨(화면) 분리

b. 컨테이너와 콘텐츠 분리

 

OOCSS의 역사는 매우 길며 명확하게 규칙이라고 불리는 것도 많지 않다. OOCSS 한 가지만으로 실직적인

CSS 설계를 수행하는 것은 그다지 현실적이지 않지만 오늘날의 다른 CSS 방법론들은 기본적으로

크건 작건 OOCSS를 참조하여 개선한 것들이다.

 

 

2. SMACSS (Scalable and Modular Architecture for CSS)

CSS 코드를 역할에 따라 분류한 것이 특징

(1) 베이스 (Base), (2) 레이아웃(Layout), (3) 모듈(Module), (4) 스테이트(State), (5) 테마(Theme)

 

베이스 규칙 - 프로젝트의 표준 스타일을 정의하는 코드 규칙으로 바탕화면 색깔 등 프로젝트 전반에 적용

                      리셋 CSS, 노멀 라이즈 CSS 등도 SMACSS 기준 베이스 규칙에 해당

 

레이아웃 규칙 - 헤더, 메인영역, 사이드 바 등 웹사이트의 레이아웃을 구성하는 큰 모듈에 관한 규칙

                          특정 페이지에서 한 차례만 사용되는 것이 많으므로, ID 셀렉터를 활용한 스타일링을 허용

                          반복적으로 사용하는 모듈의 경우에는 클래스 셀렉터를 이용

 

모듈 규칙 - 모듈은 타이틀(Title), 버튼(Button), 카드(Card), 내비게이션(Navigation) 등 일반적인

                   UI 컴포넌트를 나타내며 모든 모듈은 레이아웃 규칙 안에 배치되는 것을 가정

                   다른 페이지로 이동하거나 다른 레이아웃 안에 삽입하더라도 형태가 부서지거나 달라지지 않아야 함

                   즉, 특정 컨텍스트에 지나치게 의존하지 않도록 작성하여야 함

 

스테이트 규칙 - 기존 스타일을 덮어쓰거나 확장하기 위해 사용하며 기존 스타일을 덮어써서 스테이트 스타일을

                          반영하는 것을 기대하기 때문에 필요한 경우 !important 사용도 권장

                          스테이트는 레이아웃이나 모듈에 할당할 수 있으며 규칙에 따른 클래스 이름은 모두 is- 접두사를 붙임

 

테마 규칙 - 사이트 내 레이아웃이나 색상, 테스트 처리등을 일정한 규칙에 따라 덮어쓰는 것으로 기존의 다양한

                   스타일링이 덮어 쓰기의 대상이 됨. ex) 다크 모드 전환, 테마 컬러 변경 등

                   theme 접두사를 붙일 것을 권장

 

SMACSS는 프로젝트에서 고려해야 하는 대부분의 CSS 규칙을 포함하고 있다. 각 규칙이 엄격하지 않아 유연하나,

경우에 따라 규칙이 너무 유연하여 실제 코드의 지침으로 삼기 어려울 수 있다. 그에 따라 모듈 규칙에 OOCSS를

적용하거나 BEM 규칙을 일부 적용하는 등 다른 설계 기법과 조합하는 경우가 많다.

 

 

3. BEM (Block, Element, Modifier)

UI를 독립된 블록으로 분리함으로써 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적으로

기본적으로는 모듈 기반의 방법이지만, 그 내용이 다른 설계 기법에 비해 엄격하고 강력하여 세계적으로

이름이 알려졌으며 실제로 널리 사용되고 있다.

 

(1) Block - 재사용할 수 있는 기능적으로 독립된 페이지 구성요소

                  BEM을 사용할 때는 ID 셀렉터 또는 요소 셀렉터를 사용하면 안 됨

                  Block 이름은 상태(state)가 아닌 용도(purpose)를 나타냄

Block은 환경에 영향을 미치지 않아야 한다. 즉, Block 자체에 대한 외부 지오메트리 margin 또는

Block의 위치(position)를 설정하지 않아야 한다. (기능적으로 독립적이어야 하기 때문)

 

(2) Element - Block의 복합 부품으로 Block과 별도로 사용할 수 없음

                      Element 이름은 상태(state)가 아닌 용도(purpose)를 나타냄

                      Element는 항상 Block의 부분이어야 하며, Block으로부터 분리하여 사용해서는 안됨

                      모든 Block이 Element를 가지는 것은 아니며 Element는 서로 중첩될 수 있음

 

구현된 다른 페이지 컴포넌트에 의존하지 않고 코드가 재사용되면 Block을 만들고 부모 엔티티(Block) 없이

구분해서 사용할 수 없다면 Element를 만든다. 만약 Elements가 더 작은 부분으로 나눠져야 할 것 같다면

Block을 추가해야 한다.

 

(3) Modifier - Block 또는 Element의 모양, 상태 또는 동작을 정의

                     Modifier 이름은 모양(appearance), 상태(state), 동작(behavior)을 나타냄

                     Modifier는 홀로 사용되지 않음

 

Modifier는 Boolean과 Key-Value 2가지 유형이 있다.

a. Boolean : Modifier 유무만 중요하고 그 값이 무관할 때 사용 (disabled, focused)

                    Boolean modifier가 있으면 해당 값이 참으로 간주됨

b. Key-Value : Modifier 값이 중요한 경우에 사용 (size_s, theme_islands) 

 

동일한 유형의 다른 값을 가진 Modifier를 동시에 사용하여서는 안된다.

BEM의 모든 엔티티는 동일한 상세도를 가지기 때문에 Cascading 원칙에 따라 마지막에 선언한

css 속성이 적용되지만, 이러한 사용은 BEM에서는 금지되어 있다.

 

Mix - Block과 Element가 하나의 HTML 요소에 존재하는 것을 의미

         코드 중복을 피하면서 여러 BEM 엔티티의 동작과 스타일을 결합

         기존 BEM 엔티티를 기반으로 의미상 새로운 인터페이스 컴포넌트를 작성

         가급적 상세도를 높이지 않고 Block의 독립성을 유지할 수 있음

---

기존 CSS 방법론의 문제점으로는 CSS가 HTML 구조와 강하게 결합되어 있다는 점이다.

HTML에서 스타일이 필요한 요소에 클래스명을 부여하고, 클래스명이 부여된 요소에 CSS 스타일링을 한다면

HTML 구조에 의존해서 CSS스타일링을 하게 된다고 할 수 있다. 반대로 CSS에서 HTML과 독립적으로

스타일을 선언하고, HTML에서는 선언되어 있는 스타일에 한하여 마크업을 작성한다면

HTML이 CSS에 의존하게 된다. 이러한 기존의 CSS 방법론에 대한 문제점을 해결하기 위하여

Utility-First CSS / Functional CSS라는 방법론이 대두되었다.

 

Utility-First CSS는 더 이상 시멘틱 하고 컨텍스트에 의존하지 않는 CSS를 작성하려고 하지 않으며

클래스명만 보아도 CSS 속성과 값을 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 미리 정의하였다.

이렇게 미리 정의된 클래스를 마치 HTML 요소에 제공하는 API로 생각하여 API(클래스명)를

HTML에서 조합해서 사용하였다.

 

 

출처)

https://www.youtube.com/watch?v=B70h37mpD74&t=555s