🟡 CSS 정의와 역할

• Html문서의 스타일을 나타내기 위해 사용하는 언어
• 문서의 구조와 스타일을 별도로 분리하여 html의 각 요소를 꾸미는 역할을 한다.

🟡 CSS 등장 이전

• 각 태그마다 직접 style로 스타일을 지정해야했음.
• 같은 스타일 요소를 여러 페이지에서 중복 사용하면, 하나를 수정할 때마다 모든 요소에 반복 수정 필요.
• Html은 문서구조를 의미하므로, 직접 스타일을 지정하는 것은 바람직하다고 볼 수 없음.

🟡 CSS의 문제점

• 모든 CSS는 전역범위를 기준으로 적용되므로, 각기 다른 요소들의 스타일링에 서로 간섭 및 영향을 줄 수 있다.
• CSS파일을 분리하여 저장한 후 연결하여도 각각의 CSS 파일을 읽어들인 html에서는 모든 스타일링이 동일한 범위안에 존재하게 되므로 큰 의미가 없다.
• 웹사이트가 점점 복잡하게 제작되면서 유지보수가 용이한 CSS작성이 어려워졌고, 이를 해결하기 위해 'CSS방법론' 이 나오기 시작하였다.

🟠 OOCSS

• 'Object Oriected CSS'의 줄임말로 '객체지향 CSS'라고도 부를 수 있음.
• Nicole Sullivan(니콜 설리반)이 제창.

주요 발상

1. 레고와 같이 자유로운 조합이 가능한 모듈의 집합을 만든다.
2. 해당 모듈을 조합해 새로운 페이지를 만든다.
3. 이 경우 신규 페이지 제작시에도 기본적으로 추가적인 CSS를 만들 필요가 없음.

🔸 레고와 같은 모듈을 만들기 위한 2가지 원칙 🔸

1. Structure(구조)와 Skin(화면)을 분리한다.

• Structure(구조) : width, height, padding, margin 등이 있다.
• Skin(화면) : color, font, background, box-shadow 등이 있다.

2. Container(컨테이너)와 Content(콘텐츠)를 분리한다.

• Container는 '영역', Content는 '모듈'
• 특정한 콘텐츠는 영역에 지나치게 의존하지 않는다 = 모듈은 가능한 특정한 영역에 의존하지 않도록 한다.

🔸 결론 🔸

• OOCSS의 역사는 매우 길고, 명확하게 규칙이라 불리는 것도 많지는 않음.
• 다른 CSS방법론들도 기본적으로는 OOCSS를 참조하여 개선한 것임.
• 현재 OOCSS 한 가지로 CSS설계를 수행하는 것은 현실적이지 않음.

🔵 SMACSS

• 'Scalable and Modular Architecture for CSS'의 줄임말.
• Jonathan Snook(조나단 스눅)이 제창
• CSS코드를 각각의 역할에 따라 분류한 것이 특징(base,layout,module,state,theme)

1. Base(베이스) 규칙

• 프로젝트의 표준 스타일 정의(배경 색 등 프로젝트 전반에 적용되는 스타일)
• Reset CSS / Nomalize CSS 적용.

‣ Reset CSS란?

• 모든 브라우저의 내장 스타일을 없애는 기법으로, 아무런 스타일이 없는 상태에서 스타일링을 시작하게 됨. h1 ~ h6, p, em 등 각 태그가 가지고 있는 스타일을 모두 없앤다.
• 각 브라우저 별 버그 발생 가능성이 있으나, 업데이트 불필요.

‣ Nomalize CSS란?

• 모든 브라우저가 동등한 스타일을 가질 수 있도록 하는 기법. Reset CSS와는 달리 기존 스타일은 유지하며, 브라우저 별 다른 스타일만 수정하는 방식.
• 브라우저의 업데이트에 따라 새롭게 적용되는 내장스타일이 생길 수 있으므로 꾸준한 버전 업데이트 필요.

2. Layout(레이아웃) 규칙

• 헤더영역, 메인영역, 사이드바, 푸터 등 웹사이트의 레이아웃을 구성하는 큰 module에 관한 규칙.
• 일반적인 경우 특정 페이지에서 한 차례만 사용 되므로 id selector 를 활용한 스타일링을 허용함.
• 반복적으로 사용하는 모듈의 경우에는 class selector를 이용.

3. Module(모듈) 규칙

• Module은 Title, Button, Card, Nav 등 일반적인 UI 컴포넌트를 나타냄.
• 모든 Module은 레이아웃 규칙 안에 배치되는 것을 가정한다.
• 다른 페이지로 이동하거나 다른 레이아웃에 삽입하더라도 형태가 틀어지거나 달라지지 않고 사용할 수 있어야 함. (= 특정 콘텐츠에 의존하지 않도록 작성해야함.)

4. State(상태) 규칙

• 기존 스타일을 덮어쓰거나 확장하기 위해 사용한다.
• 기존 스타일을 완전히 덮어씌워 State 스타일을 반영하는 것을 기대하기 때문에, 필요한 경우에는 !important 사용도 권장함.
• State는 Layout 또는 Module에 할당할 수 있음.
• State규칙에 따른 class이름은 모두 is- 접두사를 붙여 표현.
• 자바스크립트에 의존

5. Theme(테마) 규칙

• 사이트 내 레이아웃이나 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는 것.
• 기존의 다양한 스타일링이 덮어쓰기의 대상. ( ex / 다크모드, 테마컬러 변경 등)
• Theme규칙에 따른 class이름은 모두 theme- 접두사를 붙이는 것을 권장.

🔹 결론 🔹

• 프로젝트에서 고려해야할 대부분의 CSS규칙을 포함
• 각 규칙이 엄격하지 않아 유연하나, 경우에 따라서는 지나치게 유연한 규칙으로 인해 실제 코드의 지침으로 삼기 어려울 수 있음.
• Module규칙에 OOCSS를 적용하거나 BEM규칙을 일부 적용하는 등 다른 CSS 설계기법과 조합하여 사용하는 경우가 많음.

출처 : 우아한테크 - 👉🏻 동동의 CSS방법론(영상)