CSS 방법론(Methodologies)

CSS 방법론 (Methodologies)

CSS 에는 방법론(Methodologies)들이 있다.

물론 이런 CSS 방법론들은 같이 일하는 팀 동료들의 팀워크와 연결되므로 매우 중요한 요소라고 할 수 있다.

이러한 습관은 평소의 습관으로 익숙하게 해두어야만 실현하기에 더 가까워질 것이다.

다른 사람이 짜놓은 코드를 보면서 스스로 어떠한 생각을 하면서 작업했었는지

또 내가 만약에 남에게 나의 소스를 보여주며 작업하라고 지시할 때

어떠한 방법론적인 규칙이 있어야만 상대방이 그 패턴을 파악하고 그것은 곧 업무의 효율성과 관련이 있어진다.

• Object-Oriented CSS (OOCSS)
• Block, Element, Modifier (BEM)
• Scalable and Modular Architecture for CSS (SMACSS)
• SUIT CSS
• Systematic CSS

CSS 방법론에는 위의 5가지가 대표적이다.

그리고 이러한 CSS 방법론을 나누는 기준에는 각 사람들의 관습과 개성이 포함된다. 

어떠한 방법이 꼭 BEST라고 할 수 없는 이유다.

Object-Oriented CSS(OOCSS)

CSS 방법론 중 OOCSS의 목표는 다양한 스타일 규칙 전체에서 동일한 속성의 중복을 줄이는 것이다.

특히 OOCSS 의 특징 중의 하나는 자손선택자의 사용을 지양한다는 것이다.

일각에서 사용하는 .mt, .fl .fr 클래스 등 여러 속성들을 분리해두고 쓰는 소규모 프로젝트형에 걸맞는 CSS 방법론이라고 할 수 있다.

Block, Element, Modifier(BEM)

BEM CSS 방법론의 목적은 서로 다른 역할을 수행하는 CSS 클래스를 차별화하는 것이다.

앞서 보았던 OOCSS을 보완하는 역할을 하기도 한다.

BLOCK

loginform

ELEMENT

loginform__username

loginform__password  

loginform__btn

MODIFIER

.loginform__username--error

.loginform__btn--inactive

.loginform--errors

각각의 요소들이 무슨 역할을 하는지 구분해둔 것만 보고도 이해할 수 있으리라 생각한다.

따라서 OOCSS와 함께 자손선택자를 지양하는 한편,

BEM은 하나의 클래스로 자손역할을 하는 부분까지 표현하는 것이 특징이다.

마크업에서는 명확한 역할을 구분지을 수 있다.

하지만, 명명규칙에 익숙하지 않은 개발자들에게는 다소 어려운 부분으로 다가와서 생산력 저하를 가져올 수 있다.

또한, 너무 길어질 우려가 있다.

Scalable and Modular Architecture for CSS(SMACSS)

위와 같이 BASE, LAYOUT, MODULE, STATE, THEME  5가지의 레이아웃 형태를 결정짓는 CSS 방법론이다.

SUIT CSS

SUIT CSS 방법론은 BEM 방법론과 더불어 LESS와 SCSS의 문법을 제공하는 것이 특징이다.

위의 5가지 방법 중 주로 BEM, OOCSS, SMACSS 방법론 정도가 가장 많이 쓰는 방법론이며, 이 5가지 방법은 5가지로 국한되지 않고

여러가지 확장 개념의 ACSS 등 새로운 방법론들이 많이 생겨나고 있다. 이러한 규칙들은 방법론을 외우고 활용하는데 의의가 있는 것이 아니라

어떻게 하면 모든 사람들이 협업하기에 문제가 없이 작성되고 그 모듈성을 인정받고 생산성을 높이는데에 활용 되는지 고민하는 데에 있다고 할 수 있다.

출처 :

https://medium.freecodecamp.com/this-picture-will-change-the-way-you-learn-to-code-557ac1e109bd

https://www.webpagefx.com/blog/web-design/css-methodologies/

http://wikibootup.org/post/css-co-work/#smacss