랄지 IT
CSS 방법론 본문
CSS방법론
개념:
객제지향의 CSS방법론으로, OOP(Object-oriented programming)의 일반적인 의미에서 결합도 낮추기(decoupling), 단일 책임의 원칙(single responsibility principle), 캡슐화(encapsulation)를 강조하는 방법론입니다
CSS의 역할이 커지면서 CSS를 보다 효율적으로 작성하는 여러가지 아이디어들이 생겼다. SMACSS, BEM, OOCSS 등이 있는데, 개인적으로 각자의 특징을 한 단어로 표현하자면, SMACSS=5형제, BEM=네이밍, OOCSS=재사용이라고 생각한다.
https://gomdoreepooh.github.io/notes/smacss-bem-oocss
목적:
코드의 재사용성을 높이자
쉽게 유지보수 하자
확장 가능하게 하자
클래스명 만으로도 무슨 의미인지 예측 가능하도록 하자
https://wit.nts-corp.com/2015/04/16/3538
https://chlolisher.tistory.com/11
몇가지 원칙을 가지고 클래스의 이름을 정하는 것이 중요하다. 일반적으로 클래스의 이름은
이름을 읽으면 무슨 의미인지 알수 있돌록
생김새가 아니라 어떤 목적인지 드러나게 (bigfont -> x, headerFont -> o)
지나치게 구체적이지 않게
재사용 가능성, 유지보수를 염두에 두고
사용하는 것을 권장한다. 하지만 이런 원칙을 가지고 있다고 하더라도 좀 뜬구름 잡는 것 처럼 느껴질 수 있다. 이러한 원칙들을 구체화 해놓은 방법론들이 있다.
이를 CSS Naming Convention이라 한다. 가장 대표적인 방법은 OOCSS 와 BEM이 있다. (이 외에도 다양한 방법론이 있지만 전혀 모자라지 않는 모질라 문서에서 소개하는 방법이 앞의 두가지 이기에 두가지에 대해서 이야기 한다. )
https://www.hamadevelop.me/cssnaming/