CSS 방법론(OOCSS, BEM, SMACSS)

목적

재사용 + 유지보수 향상

OOCSS(Object Oriented CSS)

It's an approach for writing CSS that's fast, maintainable and standards-based.
It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

Object

Basically, a CSS "object" is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughtout a site.

작성법

아래 소개된 규칙에 따라 class명을 쪼개는 것이 중요하다고 생각됩니다.
중복되는 것(skin)은 하나로 묶어 빼내고 독립적인 것(content)은 잘게 쪼개는 방향으로 진행합시다.

2 Main Principles of OOCSS

1. Seperate structure and skin

This means to define repeating visual features(like background and border styles) as separate "skins" that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code.

중복되는 디자인 CSS(skin)들을 따로 클래스명으로 작성해서 공통 적용시키는 것입니다.

2. Seperate container and content

Essentially, this means "rarely use location-dependent styles". An object should look the same no matter where you put it.

A container is never useful information to the user on its own;
only the content elements whithin it convey reasonable information to the user.

중요한 것은 재사용성이므로 컨텐츠만 별도로 css를 설정하여 다양한 container안의 컨텐트에 적용될 수 있도록 해야합니다.

---

BEM(Blocks, Elements and Modifiers)

작성법

class="Block__Element--Modifier"

_과 - 병용, 갯수에 따라 구분하는 등 다양한 작성방법이 있으니 본인이 구분하기 쉬운 방법을 사용하면 될 듯 합니다.
저는 확실한 구분을 위해 코딩애플 선생님이 추천하신 class="덩어리이름__역할--세부특징"을 사용하려 합니다.

Block

standalone entity that is meaningful on its own

Block은 스스로 독립적인 의미를 가진 덩어리입니다.

Examples

header, container, menu, checkbox, input

Element

A part of a block that has no standalone meaning and is semantically tied to its block

Element는 독립적인 의미는 없지만 block에 종속되면 의미(역할)를 가지는 아이입니다.

Examples

menu item, list item, checkbox caption, header title

Modifier

A flag on a block or element. Use them to change appearance or behavior.

Modifier는 block 또는 element의 세부특징을 묘사하는 아이입니다.

Examples

disabled, highlighted, checked, fixed, size big, color yellow

---

SMACSS(Scalable and Modular Architecture for CSS)

Feel free to take this in its entirety or use only the parts that work best for you. Or don't use it at all.

At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.

There are five types of categories: Base/ Layout/ Module/ State/ Theme
Much of the purpose of categorizing is to codify patterns - things that repeat themselves within our design.

SMACSS의 공식문서를 읽어보았는데 너무 읽히지 않았습니다.
CSS 방법론은 말 그대로 하나의 방법을 제시하는 것이고, 저자 역시 굳이 사용할 필요가 없다고 하였으니 다음에 필요성을 느끼게 된다면 진지하게 읽어보려합니다.

최근경향

CSS 방법론은 대부분 2010년대 초반에 나왔습니다.
현 2020년대 웹개발은 react, view 등 라이브러리를 사용하여 component 단위로 css를 설계하고 있습니다.
고로 css file의 size가 작아졌고 광대한 사이즈의 css파일을 정리하기위한 CSS 방법론은 쓸모가 적어졌습니다.

느낀점

CSS 방법론 3가지를 공부하면서 개발자들에 있어 재사용성, 유지보수를 위한 설계가 중요하다는 것을 다시 깨달았습니다.
CSS 방법론들의 철학을 공부할 수 있었던 좋은 기회였습니다.

참고사이트

• 코딩애플 HTML/CSS 강좌
• https://github.com/stubbornella/oocss/wiki
• https://www.slideshare.net/stubbornella/object-oriented-css
• https://github.com/stubbornella/oocss/wiki/Module
• https://webactually.com/2019/10/08/%ea%b0%9d%ec%b2%b4-%ec%a7%80%ed%96%a5-css-%ec%86%8c%ea%b0%9c/
• https://getbem.com/introduction/
• https://smacss.com/book/