우아한테크) 동동의 css방법론

[10분 테코톡] 🎉 동동의 CSS 방법론 - YouTube

[CSS란]

HTML 또는 XML로 쓰여진 문서의  스타일을 나타내기 위해 사용되는 언어
문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할

HTML에는 구조를 기술하고, css에서는 스타일을 기술하여 관심사의 분리가 가능하다.
CSS파일은 전역범위이므로 한번 스타일을 부여하면 여러 페이지에 동일하게 적용되기 때문에 유지보수에도 유리하다

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

 

 

[이를 위한 방법론]

1. OOCSS
-레고처럼 자유로운 조합이 가능한 모듈의 집합을 만든다
-모듈을 조합해 페이지를 만든다
-그리하여 신규페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없다

모듈구현을 위한 두가지 원칙
1)스트럭처(구조)와 스킨(화면) 분리
-공통적인 부분과 공통적이지 않은 부분을 분리하여 중복을 피하고 유지보수성을 증가시킨다
2)컨테이너(영역)와 콘텐츠(모듈) 분리
-> 모듈을 가능한 특정한 영역에 의존하지 않도록 한다

-> 10년이 더된 사고방식이 여러 CSS 설계기법에 요소요소 녹아들어 사용된다.


2. SMACSS
CSS 코드를 그 역할에 따라 분류함
-베이스
프로젝트의 표준 스타일을 정의(바탕화면 색깔등 프로젝트 전반에 적용되는 스타일링)
-레이아웃
헤더, 메인영역, 사이드 바 등 웹사이트의 레이아웃을 구성하는 큰 모듈에 관한 규칙
대부분 특정 페이지에서 한 차례만 사용하므로 ID셀렉터를 활용한 스타일링을 허용
-모듈
타이틀, 버튼, 카드 내비게이션등 일반적 UI컴포넌트를 나타낸다
모든 모듈은 레이아웃 규칙 안에 배치되는 것을 가정한다
특정 컨텍스트에 지나치게 의존하지 않도록 작성하여 다른 페이지로 이동하더라도 형태가 달라지지 않도록해야함
모듈의 루트 요소에는 반드시 클래스 셀렉터 사용: 여러번 사용할 것을 가정하기 때문에 
-스테이트
기존 스타일을 덮어쓰거나 확장하기 위해 사용
필요한 경우 !important 사용도 권장
스테이트 규칙에 따른 클래스 이름은 is-접두사를 붙인다
JS에 의존한다
-테마
사이트 내 레이아웃이나 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는것
EX)다크모드 전환, 테마 컬러 변경 등
theme 접두사를 붙이는 것을 권장


-> 프로젝트에서 고려해야하는 대부분의 CSS규칙을 포함하고 있다.



3.BEM
UI를 독립된 블록으로 분리함으로 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적, 기본적으로 모듈 기반의 방법
-BLOCK
재사용할 수 있는 기능적으로 독립적인 페이지 구성요소
class셀렉터를 사용: 모듈을 가능한 균일하게 유지 하기 위함
Block은 환경에 영향을 미치지 않아야한다. 즉, Block 자체에 대한 외부 지오메트리(margin) 또는 Block의 위치를 설정하지 않아야한다.


-ELEMENT
Block의 복합 부품으로 Block과 별도로 사용할 수 없다. Element는 항상 Blockdml 엔티티다
이름을 기재할 시 Block의 이름을 기재하고, __후에 element이름 기재해야한다.

-Modifier
Block 또는 Element의 모양, 상태 또는 동작을 정의-> 홀로 사용되지 않는다
-유형-
1)Boolean : modifier 유무만 중요하고 값이 무관할 때 사용
2)Key-Value: Modifier 값이 중요한 경우에 사용: size_s, theme_islands

-Mix
Block과 Element가 하나의 HTML요소에 존재하는 것을 의미
 
문제점
css와 html이 여전이 강하게 결합되어있음


4. 새로운 css방법론-Utility First Css

-클래스명만 보아도 CSS속성과 값을 바로 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 사전에 미리 정의
-> 미리 정의된 클래스를 마치 HTML요소에 제공하는 API로 생각하여 API(클래스명)을 HTML에서 조합해서 사용
ex) class="w-1/2 rounded-md border border-gray-300"

inline style과 다르게사전에 정해진 리스트에서 골라야 하므로 전체적인 일관성으로 높일 수 있다