10분 테코톡 - CSS 방법론

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

 

| CSS

HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어

문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XMLl의 각 요소를 꾸미는 것이 역할

​

| CSS 등장 이전/이후의 스타일링

1. 등장 이전

각 요소의 전용 속성이나 style 속성으로 스타일을 일일이 지정

​

문제점

1) 같은 스타일 요소를 여러 페이지마다 사용하면, 하나를 수정할 때마다 그만큼 반복하여 수정이 필요함

2) HTML 은 본래 문서 구조를 의미, 직접 스타일을 지정하는 것은 바람직하지 않음

​

2. 등장 이후

CSS 파일에는 스타일을 기재, HTML에는 문서의 구조를 작성하게 되어 관심사의 분리가 이루어짐

한 곳에 수정하여 여러 페이지에 적용

​

| CSS의 문제점

1) CSS에서는 모든 것이 전역 범위이므로 , 모든 스타일링이 서로 간섭할 가능성이 있다.

2) CSS파일이 분리되어 있다 하더라고 이 파일들을 읽어 들인 HTML 에서는 모든 스타일링이 동일한 범위 안에 존재하게 된다.

3) 웹 사이트가 점점 복잡해 지면서 유지보수가 용이한 CSS를 작성하는 것이 어려워졌고, 이를 해결하기 위한 CSS방법론이 여러가지 대두 되었다.

​

| CSS 방법론

1. oocss

Object Oriected CSS : 객체 지향 CSS

니콜 설리번(Nicole Sullivan)이 제창

​

주요 발상

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

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

3) 그리하여 신규 페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없다

​

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

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

스트럭처 : width, height, padding, margin 등

스킨 : color, font, background, box-shadow 등

​

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

1) 컨테이너는 '영역', 콘텐츠는 '모듈'

2) 특정한 컨텍스트에 지나치게 의존하지 않는다

>> 모듈은 가능한 특정한 영역에 의존하지 않도록 하는 것을 의미

​

정리

1) OOCSS의 역사는 매우 길며 명확하게 규칙이라고 불리는 것도 많지 않다

2) 다른 CSS방법론들은 기본적으로 크건 작건 OOCSS를 참조하면서 개선한 것

3) 오늘날 OOCSS한 가지만으로 실질적인 CSS설계를 수행하는 것은 그다지 현실적이지 않음

​

2. SMACSS(Scalable and Modular Architecture for CSS)

조나단 스눅(Jonathan Snook)이 제창

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

1. 베이스(Base)

2. 레이아웃(Layout)

3. 모듈(Module)

4. 스테이트(State)

5.테마(Theme)

​

베이스(Base) 규칙

1. 프로젝트의 표준 스타일의 정의

2. 리셋 CSS, 노멀라이즈 CSS도 베이스 규칙에 해당됨

​

레이아웃(Layout) 규칙

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

2. 대부분 특정 페이지에서 한 차례만 사용하므로 ID 셀렉터를 활용한 스타일링을 허용

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

​

**특정한 페이지에서만 레이아웃을 변경하고 싶은 경우

손자 셀렉터를 이용해 레이아웃 모듈의 스타일을 덮어씀

​

모듈(Module) 규칙

1. 모듈은 타이틀(Title), 버튼(Button), 카드(Card), 내비게이션(Navigation) 등 일반적인 UI 컴포넌트를 나타냄

2. 모든 모듈은 레이아웃 규칙 안에 배치되는 것을 가정

3. 다른 페이지로 이동하거나 다른 레이아웃 안에 삽입하더라도 형태가 부서지거나 달라지지 않고 사용할 수 있어야함

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

4. 모듈은 한 페이지 내에서 반복해서 사용되는 상황을 가정하고 있으므로 ID 셀렉터를 이용한 구현은 하지 않고 루트 요소에는 반드시 클래스 셀렉터를 사용한다.

​

**요소 셀렉터를 사용하지 않는 것을 권장

요소 셀렉터를 사용할 경우, 손자 셀렉터가 아닌 자녀 셀렉터를 사용하여 영향 범위를 지나치게 넓히지 않아야 함.

​

스테이트(State) 규칙

1. 기존 스타일을 덮어쓰거나 확장하기 위해 사용

2. 기존 스타일을 모두 덮어써서 스테이트 스타일을 반영하는 것을 기대하기 때문에 필요한 경우에는 !important 사용도 권장

3. 스테이트는 레이아웃이나 모듈에 할당 가능하다.

4. 스테이트 규칙에 따른 클래스 이름은 모두 is- 접두사를 붙임

5. 스테이트는 자바스크립트에 의존함

​

테마(Theme) 규칙

1. 사이트 내 레이아웃이나 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는 것

2. 기존의 다양한 스타일링이 덮어쓰기의 대상이 됨

ex) 다크모드 전환, 테마 컬러 변경 등

3. theme 접두사를 붙일 것을 권장

​

SMACSS 정리

1) 프로젝트에서 고려해야 하는 대부분의 CSS규칙을 포함

2) 각 규칙이 엄격하지 않아 유연하나, 경우에 따라 규칙이 너무 유연하여 실제 코드의 지침으로 삼기 어려움

3) 모듈 규칙에 OOCSS 를 적용하거나 다음에 설명할 BEM의 규칙을 일부 적용하는 등 다른 설계 기법과 조합하는 경우가 많음

​

3. BEM

1. Block, Element, Modifier

2. 러시아의 Yandex사가 제창한 컴포넌트 기반 웹 개발 접근법

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

4. 기본적으로는 모듈기반의 방법이나, 다른 설계 기법에 비해 엄격하고 강력하여 세계적으로 이름이 알려졌으며 실제로 널리 사용되고 있음

​

Block

1. 재사용할 수 있는 기능적으로 독립적인 페이지 구성요소

2. BEM을 사용할 때는 ID셀렉터 또는 요소 셀렉터를 사용하면 안됨 >> 클래스 셀렉터만 사용한다고 생각

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

4. Block은 환경에 영향을 미치지 않아야 함. Block 자체에 대한 외부 지오메트리(margin) 또는 Block의 위치(position)를 설정하지 않아야 함.

5. Block들은 서로 중첩 가능

​

Element

1. Block의 복합 부품으로 Block과 별도로 사용할 수 없음

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

3. 명명법 : block-name_element-name

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

5. 모든 Block이 Element를 가지는 것은 아님

6. Element들은 서로 중첩 될 수 있음

7. 모든 Block이 반드시 Element를 가져야 할 필요는 없음

​

Q. Block을 만들어야 할까? Element를 만들어야 할까?

1. 구현된 다른 페이지 컴포넌트에 의존하지 않고 코드가 재사용된다 >> Block 생성

2. 부모 엔티티(Block) 없이 구분해서 사용할 수 없다 >> Element 생성

3. 더 작은 부분으로 나뉘어져야 하는 Elements >> Block추가 >> Mix기법 >> BEM에서는 Elements의 Elements는 만들 수 없음

​

Modifier

1. Block 또는 Element의 모양, 상태 또는 동작을 정의

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

3. Modifier는 홀로 사용되지 않음

​

Modifier 유형

1. Boolean

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

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

명명법 : block-name_modifier-name, block-name_element-name_modifier-name

​

​2. Key-Value

1) Modifier 값이 중요한 경우에 사용 : size_s, theme_islands

명명법 : block-name- -modifier-name_modifier-value, block-name_element-name_modifier-name_modifier-value

​

* MindBEMding

Modifier 전후의 구분 문자를 언더바 한 개에서 하이픈 두 개로 변경한 스타일

​

* Mix

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

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

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

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

​

| 기존 CSS 방법론의 문제점

1. CSS가 HTML 구조와 강하게 결합되어 있음

2. HTML에 의존하는 CSS

1) HTML에서 스타일이 필요한 요소에 클래스명을 부여

2) 클래스명이 부여된 요소에 대하여 CSS에서 스타일링

3. CSS에 의존하는 HTML

1) CSS에서 HTML과 독립적으로 스타일을 선언

2) HTML에서는 선언되어 있는 스타일에 한하여 마크업 작성

​

| 새로운 CSS 방법론

* Utility-First CSS / Functional CSS

1. 시멘틱하고 컨텍스트에 의존하지 않는 CSS 작성하지 않음

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

3. 미리 정의된 클래스를 마치 HTML 요소에 제공하는 API로 생각하여 API(클래스명)을 HTML에서 조합해서 사용

​

inline style과 다른점

1. 아무 값이나 지정할 수 있는게 아님. 사전에 정해진 리스트에서 골라야 하므로 전체적인 일관성을 높일 수 있음.

2. hover, focus 등의 의사 클래스 셀렉터도 사용할 수 있음

3. media query를 사용할 수 있어 반응형 디자인에 대응이 수월함

​

**널리 알려진 Utility-First CSS

Tailwind CSS , Tachyons , Atomic CSS