CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。

OOCSS(Object Oriented CSS)

兩個原則

白話文解釋就是「使用 class 撰寫樣式,每個 class 有其各自用途」。

例如

<button class="btn btn-small btn-primary"></button>

其中

這樣的規範讓開發者能設計出一套可經由「組合」而產生多種樣式結構,讓程式碼更精簡、便於管理與維護。範例:Bootstrap

SMACSS

具結構分類、命名規則的限制。

通則

結構

優點同 OOCSS,缺點是結構的分類存在模糊界線。

BEM

BEM 是一種 CSS class 命名的設計模式,將介面切割成許多獨立的區塊,以區塊(Block)、元素(Element)和修飾子(Modifier)來命名,優點是以元件觀念進行開發,具有重用性。它擁有 OOCSS 的架構清楚的美好,也沒有 SMACSS 複雜或令人混淆的部份。另外,由於 BEM 是功能導向的,因此不會像是 OOCSS 或 SMASS 可能會出現為了區別樣式而產生像是 .mt-15(翻譯:margin-top: 15px)這種讓人難以理解的 class 名稱。因此 BEM 是一個很優秀的 CSS 架構指南。可參考這裡

CSS Modules / Scoped CSS

解決全域污染的問題,解法是讓樣式變成限定範圍的。也就是在 class name 加上 hash 就可以產生唯一的名稱,而限定在某個元件上。可參考這裡那裡。可惜的是,W3C Working Draft 不會將這個功能實現了-[css-scoping] scoped attribute on style element removed from HTML

在專案的實際應用上,可以使用 CSS Modules、React.js 可用 react-css-modulesbabel-plugin-react-css-modules,至於 Vue.js 的元件有 <style scoped> 可用。

CSS in JS

當紅代表 Styled Components - 在 JS 中撰寫 inline-style,每個元件只管自己的樣式即可。也就是說,Styled Components 將樣式也併入元件了,搭配著 React.js 可真是元件化到極致了呢。

CSS in JS 的好處是

缺點就是和框架綁在一起,以後要走其他的路就困難了。

範例。

import React, { Component } from 'react';
import styled from 'styled-components';

const Container = styled.section`
  border-radius: 5px;
  background: #bbb;
  color: #402726;
`;

const List = styled.ul`
  color: #fff;
  padding: 5px;
`;

const Item = styled.li`
  display: ${ props => props.isShow ? 'block' : 'none' }
`;

class Newsticker extends Component {
  // 省略不必要的部份...

  render() {
    return (
      <Container>
        <List>
          <Item key="1" isShow={true}>Hello World!</Item>
          <Item key="2" isShow={false}>How are you?</Item>
          <Item key="3" isShow={false}>Happy :)</Item>
        </List>
      </Container>
    );
  }
}

export default Newsticker;

詳情請見此

感想

More


CSS Modules CSS in JS BEM styled-components css react.js vue.js babel