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
```