CSS Architecture

CSS Architecture

Pattern

• OOCSS
  • http://oocss.org/
  • https://github.com/stubbornella/oocss
  • https://www.slideshare.net/stubbornella/object-oriented-css/
• SMACSS
  • http://smacss.com/ja
• BEM
  • https://en.bem.info/
• MCSS
  • https://operatino.github.io/MCSS/ja/
• APBCSS
  • https://apbcss.com/
• FLOCSS
  • https://github.com/hiloki/flocss
• RSCSS
  • https://rscss.io/

Detail

OOCSS

Object-Oriented CSS (オブジェクト指向CSS)

- Separate structure and skin
- Separate container and content

SMACSS

Scalable and Modular Architecture for CSS

- ベースルール
    -　このルールはほとんど単独で1つの要素セレクタとなるが、属性セレクタや疑似クラスセレクタ、子セレクタ、兄弟セレクタを利用することもできる。原則的にベーススタイルはあるページにおいての要素に対して、その要素の見た目がこうであると定義するものになる。
- レイアウトルール
    - レイアウトルールはページをセクション毎に分割する。レイアウトは1つ以上のモジュールを保持する。
- モジュール
    - デザインにおいて再利用可能なモジュラーパーツだ。吹き出しであり、サイドバーセクションであり、商品リストなどはその例になる。
- 状態(ステート)
    - ある特定の状態においてモジュールやレイアウトがどうスタイルされるかを説明する方法だ。
- テーマ
    - 状態(ステート)ルールとモジュールやレイアウトがどう見えるかという点では同様のルールとなる。

BEM

BEM (Block, Element, Modifier) is a component-based approach to web development.

- Block
    - The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).
    - The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block.
- Element
    - The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
    - The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).
- Modifier
    - The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
    - The modifier name is separated from the block or element name by a single underscore (_).

MCSS

CSSモジュール（及び、その内部ブロック）はレイヤーごとに分離され、そのそれぞれのレイヤーは他のレイヤーモジュールと連携したり、一方的に利用するような独自のルールを持つことになります。

- レイヤー 1 — ベース（ファーストレイヤー）
    - ファーストレイヤーはウェブサイトの骨子で、インターフェースの中心部分です。最も再利用可能で抽象的な構造に基づいています。
- レイヤー 2 — プロジェクト（セカンドレイヤー）
    - セカンドレイヤーは、分離された、ページを構成するプロジェクトモジュールを含みます
- レイヤー 3 — コスメティック（サードレイヤー）
    - サードレイヤーはシンプルで、わずかに影響するスタイルから成ります

APBCSS

Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS)

- Atomic：Class name of atom
- Module：UI package name
- Skin：Class name of decoration
- Number：Numbering of the class name
- State：Class name that represents the state
- Other：Other class name

FLOCSS

FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。

- Foundation - reset/normalize/base...
- Layout - header/main/sidebar/footer...
- Object
    - Component - grid/button/form/media...
    - Project - articles/ranking/promo...
    - Utility - clearfix/display/margin...

RSCSS

Reasonable System for CSS Stylesheet Structure.

- Elements
    - reset/normalize/base...Elements are things inside your component.
- Variants
    - Components may have variants. Elements may have variants, too.
- Nested components
- Layouts
- Helpers