---
tags: 學習筆記, front-end, CSS,
---
# CSS 命名及模組化學習筆記
###### tags: `CSS`, `Guide Line`, `Structure`, `Naming`
### Why do we need guideline ?
1. Scalabitly
>取自 [Implementing SMACSS: A Scalable And Modular Architecture For CSS](https://www.lambdatest.com/blog/smacss-scalable-modular-architecture-for-css/)
>>When we talk about an application’s scalability, we rarely bring CSS into the picture. Scalability typically raises concerns about the system’s design, resource management, monitoring, and, of course, query time limits. But have you ever pondered the measures we should take while developing CSS with scalability in mind? CSS becomes more tangled as a website expands in size.

2. Maintainability
In General, it is a task to maintain or manage an mess written by others wihtout an logic specifcation. Therefore guideline is your best option to prevent from those happend. Firstly it provide an logic naming rules and architecture to make sure that it understandable for everyone. Secondly moduliztion of CSS can flex your resource management, and provide more resource to use.

3. CSS Specificity
Dut to unpropper selector use, specificity could be an pain on the neck during developing. Especially when project is quite a size, it would be complex to adjust. Therefore specifcation of name and selection are required to create an enviorment that most of attributes have same specificity.

:::info
:fire: New CSS property `@layer` can solve specificity perfectly, make sure to [check](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer) on it
:::

## OOCSS（Object Oriented CSS）
###### tags: `OOCSS`
One class for one atributte.

### Structure
OOCSS has two major underlying principles. The first is establishing a clear division between structure and skin. And the second is to divide container and content.

#### Separation of structure and skin
* Height
* Width
* Margins
* Padding
* Overflow

#### Separation of container and content
* Colors
* Fonts
* Shadows
* Gradients

:::warning
:warning: **Avoiding child selectors** is a good strategy for maintaining separation between content and containers. Be sure to **bestow unique classes to unique elements**.
:::

---

## SMACSS (Scalable and Modular Architecture for CSS)
###### tags: `SMACSS`, `Scalability`

### Structure
Includes five part.
1. [Base](#Base)
2. [Layout](#Layout)
3. [Module](#Module)
4. [State](State)
5. [Theme](Theme)

CSS files:

    @import 'varible.css';
    @import 'reset.css';
    @import 'base.css';
    @import 'layout.css';

#### Base
The idea of Base is to provide a basic/default style. Similar to reset or normalize CSS which noramlize and reset HTML tags for different browser or website default style.

/* IN BASE.CSS */
a {
    text-decoration: none;
}
button {
    border: 0;
}

Base can be written within or after reset.css, But due to different browser would have different reset attributes, set it independently would give you more flexibility.

:::warning
:warning: Do not use `!improtant` in Base.css.
:::

#### Layout
For the components that could be used over many times. Such as header, foote, nav...etc. Those would be isolated to layout.css. With the use of layout prefix `l-` to differ from other classes. you can recognize it instinctively.

.l-nav { }
.l-nav--logo { }
.l-nav--link { }

#### Module
Many framworks have concept of module, such as bootstrap. In SMACSS, Basic style attributes must be isolated as a default style, So next time we just need to add another class for different appearence.

.button {
    width: 120px;
    height: 60px;
    text-align: center;
    line-height: 1.5;
    background-color: yellow;
    color: black;
}

.button-primary {
    color: white;
    background-color: skyblue;
}

#### State
For those situations like success, erro, open ... etc. SMACSS use `is-` as prefix to identitfy the class.

.is-active { }
.is-disable { }
.is-success { }
.is-error { }

State and Moudle has a between them, Both of them change the appearence of elements. However State has focus more on:

1. State style attributes can be use in Layout and Module.
2. State attributes only can be applied by JavaScript.

#### Theme
>取自 [Scalable and Modular Architecture for CSS](http://smacss.com/book/type-theme)
>>Theme Rules aren't as often used within a project and because of that, they aren't included as part of the core types. Some projects may have a need for them, though, as we did when working on Yahoo! Mail..

## BEM (Block Element Modifier)
###### tags: `BEM`

### Structure
Class name : `.[block]__[element]--[modifier]`.
A BEM class name includes up to three parts.
1. [Blcok](#Blcok)
2. [Element](#Element)
3. [Modifier](#Modifier)

/* Component Class */
.photo { }
/* Component Elements */
.photo__img { }
.photo__caption { }
/* Component Elements Modifier */
.photo__caption--hightLight { }

:::warning
:warning: Do not try to represent each level in the class name, BEM is **not intended to communicate structural depth**. Class name should only remain to `base/block__one element`.
:::

#### Block
**Standalone entity** that is main to be on its own and also the **outermost parenet of component**.
* Rule : Describe function, **No selector/ID selector, No styling**.
* Example : header, container, menu, checkbox, input, table.

#### Element
Inside the component, **childern of block** that **tied to its block**.
* Rule : Must have **parent** ahead.
* Example : table cell/heading/caption, list item, header tile/subtitle.

#### Modifier
**A flag on a block or element**. Used to change appearance or behavior.
* Example : state-disable, success, checked, fiexed, size-small, color-red

---

#### Reusability :
>取自 [BEM -- Introduction](https://getbem.com/introduction/)
>>Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.
## Overview

### OOCSS Benefit
* Speed
* Scalability
* Efficiency
* Maintainability
* Readability

### SMACSS Benfit

### BEM Benefit
#### Low specificity
None selector use keep your class low specificity and consistent.
:::warning
:warning: Event though use selector to style those **bare elements** are more succient, but it could **cause cascade and specificity issues** in furture.
:::

#### Modularity :
Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.
:::warning
:warning: One goal of BEM is for **most selectors to use just a single class name**.
:::

## 參考文獻
### Smashing Magazine
- [ ] [An Introduction To Object Oriented CSS (OOCSS) — Smashing Magazine](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)

### KeyCDN
- [x] [OOCSS - The Future of Writing CSS - KeyCDN](https://www.keycdn.com/blog/oocss)

### Get BEM
- [x] [BEM -- Introduction](https://getbem.com/introduction/)
- [x] [BEM -- Naming](https://getbem.com/naming/)

### Spark Box
- [x] [BEM by example](https://sparkbox.com/foundry/bem_by_example)

### CSS Guide Line
- [ ] [High-level advice and guidelines for writing sane, manageable, scalable CSS](https://cssguidelin.es/#bem-like-naming)

### W3c Hex School
- [ ] [淺談 BEM CSS - CSS 設計模式與架構](https://w3c.hexschool.com/blog/35afa83f)

### Object-Oriented CSS
- [ ] [Object-Oriented CSS](http://oocss.org/)

### Scalable and Modular Architecture for CSS
- [ ] [Scalable and Modular Architecture for CSS](http://smacss.com/)

### HongKiat
- [x] [The Basics of Object-Oriented CSS (OOCSS)](https://www.hongkiat.com/blog/basics-of-object-oriented-css/)

### Blog
- [ ] [CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS](https://www.cythilya.tw/2018/06/05/css-methodologies/)
- [ ] [Use BEM for scalable and maintainable CSS](https://blog.tinaciousdesign.com/bem-css-scalable-maintainable)
- [x] [淺談 CSS 設計模式-SMACSS 篇](https://israynotarray.com/css/20200516/2341336904/)
- [ ] [Sass / SCSS 預處理器 - OOCSS、SMACSS、BEM 模組化方法論](https://awdr74100.github.io/2020-06-19-scss-oocss-smacss-bem/)
- [ ] [What Is SMACSS and How Does It Work?](https://matcha.fyi/smacss-explained/)
- [x] [Getting started with Object-Orientated CSS OOCSS, creating a button kit](https://ultimatecourses.com/blog/getting-started-with-object-orientated-css-oocss-creating-a-button-kit)
- [x] [Naming UI components in OOCSS](https://csswizardry.com/2014/03/naming-ui-components-in-oocss/)

### IT幫忙
- [ ] [Day21：小事之 CSS Reset 與 CSS normalize](https://ithelp.ithome.com.tw/articles/10196528)
- [ ] [#番外-讓你的CSS好讀起來！CSS命名方法論筆記](https://ithelp.ithome.com.tw/articles/10271827)

### LAMDATEST
- [ ] [Implementing SMACSS: A Scalable And Modular Architecture For CSS](https://www.lambdatest.com/blog/smacss-scalable-modular-architecture-for-css/)