【原子樣式實踐】第2篇 原子樣式分類和定義

1 布局

1.1 布局分類

頁面元素的顯示方式主要分為外部顯示和内部顯示，參考屬性 ​

​display​

​。

外部顯示主要是元素的外在表現，包括行内顯示、區塊顯示。

内部顯示主要是子元素的顯示方式，對應我們常說的布局，包括流式（Flow）布局、浮動（Float）布局、彈性（Flex）布局、網格（Grid）布局等。

1.2 流式布局

浏覽器預設采用的布局，頁面元素自上而下排列，取決于原生樣式。對于簡單頁面或者DEMO頁面可以使用。

<!-- 使用示例 -->
<div class="container">
  <div class="card">
    <div class="item">
      ...
    </div>
  </div>
  <div class="card">
    <div class="item">
      ...
    </div>
  </div>
</div>      

這種情況下無需額外定義樣式。

1.3 浮動布局

用于頁面元素的全局靈活布局或者次要元素的顯示布局。

主要使用屬性 ​

​position​

​​，配合 ​

​top​

​​、​

​bottom​

​​、​

​left​

​​、​

​right​

​ 使用。 

（1）全局靈活布局包括遊戲、活動等全屏場景。

.stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.circle {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 80px;
  left: 100px;
}      

（2）次要元素布局包括菜單、紅點等元件内應用場景。

# 紅點場景示例
.data-label {
  position: relative;
  width: 64px;
  height: 64px;
}
.red-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 4px;
  top: -3px;
  right: -3px;
}      

這種情況下，可以定義簡單樣式。

.pos-abs {
  position: absolute;
}
.pos-rel {
  position: relative;
}
.wh-full {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
.p-tr-3 {
  top: 3px;
  right: 3px;
}      

浮動的情況下，會涉及到層次的問題，涉及到屬性 ​

​z-index​

​，可以定義樣式如下。

.z-1 { z-index: 1 }
.z-2 { z-index: 2 }
.z-3 { z-index: 3 }
.z-4 { z-index: 4 }
.z-5 { z-index: 5 }      

1.4 彈性布局

1.4.1 flex布局特點

flex布局是使用友善的布局，目前主要的布局方式。

（1）支援橫向、縱向、換行等多種排列方向，使用屬性 ​

​flex-direction​

​​ , ​

​flex-wrap​

​。

（2）支援上、下、左、右、中等對齊方式，使用屬性 ​

​justify-content​

​​, ​

​align-items​

​​, ​

​align-content​

​。

（3）支援内部元素的有序排列，使用屬性 ​

​order​

​。

（4）支援彈性變大、縮小，使用屬性 ​

​flex-grow​

​​, ​

​flex-shrink​

​。

1.4.2 flex布局樣式

根據排列方向、對齊方式等角度除法封裝常用樣式，示例如下。

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}
.row-r { ... }

.col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.col-r { ... }

.ai-top { ... }
.ai-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  
}
.ai-bottom { ... }

.jc-left { ... }
.jc-center {
    -webkit-justify-content: center;
    justify-content: center;
}
.jc-right { ... }

.c1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.c2 { ... }

.c-g1 { ... }
.c-s1 { ... }      

<!-- 使用示例 -->
<div class="row">
  <div class="c1">...</div>
  <div class="c1">...</div>
  <div class="c1">...</div>
</div>      

1.5 網格布局

1.5.1 網格布局特點

彈性布局好用，但是對于多行多列的布局寫起來太過于麻煩，而網格布局則能很好的解決這一問題。

網格布局使用屬性 ​

​grid-template-columns​

​，其參數可以設定為不同寬度，使用可以很靈活。但在預定義的情況下，就失去了這一靈活性。

在結合彈性布局的情況下，可以考慮固定網格，比如兩列均分、九宮格，十六宮格等，可以滿足基本的布局需要。

如果有其他複雜場景，也可以自定義樣式追加使用。

1.5.2 網格布局樣式

.gc-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.gc-2-21 {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.gc-2-12 {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.gc-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.gc-4 {
  ...
}

.gc-5 {
  ...
}      

1.6 元素空間

1.6.1 尺寸

主要是寬度 ​

​width​

​​ 和高度 ​

​height​

​，根據常用尺寸定義即可，例如icon、縮略圖、封面圖、卡片、标題、清單等。

.w-36 {
  width: 36px;
}
.w-80 {
  width: 80px;
}
...

.h-120 {
  height: 120px;
}
.h-80 {
  height: 80px;
}
.h-20 {
  height: 20px;
}
.h-1 {
  height: 1px;
}
...

.wh-36 {
  width: 36px;
  height: 36px;
}
.wh-96 {
  width: 96px;
  height: 96px;
}      

為了配合彈性布局使用，需要定義最小寬度 ​

​min-width​

​​ 或者最小高度 ​

​min-height​

​，序号、空白等都需要。

.mw-100 {
  min-width: 100px;
}

.mh-200 {
  min-height: 200px
}      

1.6.2 元素間距

間距分為對内 ​

​padding ​

​​和對外 ​

​margin​

​ 兩種，分全部、水準（ｘ）、垂直（ｙ）方向或者上（ｔ）下（ｂ）左（ｌ）右（ｒ），根據常用規範定義使用即可。

.m-20 { margin: 20px }


.px-20 { 
  padding-left: 20px;
  padding-right: 20px;
}
.px-10 {...}

.mx-32 { ... }
.mx-20 { ... }

.my-20 { ... }
.my-10 { ... }

.pt-10 { padding-top: 10px }
.pb-10 { padding-bottom: 10px }
.pl-10 { padding-left: 10px }
.pr-10 { padding-right: 10px }      

1.6.3 子元素間距

對于使用彈性布局和網格布局的，元素間的間距可以在父元素定義。

.gg-30 { grid-gap: 30px; }
.gg-20 { grid-gap: 2.667vmin; }
.gg-10 { grid-gap: 1.333vmin; }
.gg-5 { grid-gap: 0.667vmin; }      

2 色彩

2.1 上色的元素

元素的背景色 ​

​background-color​

​​ 、前景色（字型顔色） ​

​color​

​​ 和邊框色 ​

​border-color​

​ 均可定義。

對于頁面的背景色的全局設定，根據情況可以使用 style 定義，其他均使用預定義樣式。

2.2 色彩主題

除了黑白色基本主題外，還需要支援信号色（紅、黃、綠，對應錯誤/失敗、警告/提示、成功）和多個主題。

每套主題需要設定一個主題色。

# 背景顔色
.bg-primary { ... }
.bg-white { ... }
.bg-red { ... }
.bg-yellow { ... }
.bg-blue { ... }
.bg-green { ... }

# 字型顔色
.fc-primary { ... }
.fc-white { ... }
.fc-black { ... }
.fc-red { ... }
.fc-yellow { ... }
.fc-blue { ... }
.fc-green { ... }

.fc-gray1 { ... }
.fc-gray2 { ... }
.fc-gray3 { ... }

.bg-gray1 { ... }
.bg-gray3 { ... }

# 線顔色
.line-color-primary { ... }
.line-color-red { ... }
.line-color-yellow { ... }
.line-color-green { ... }

...      

2.3 色階

對于同一色系，色階要具有區分度，不一定需要連續。

顔色定義需要設計師完成。

3 排版

3.1 排版說明

取消H1、H2、FORM等組合樣式使用，除非是大量内容的固定格式，可以降級為原子樣式。

3.2 字型名稱

避免使用浏覽器不支援的字型，數字字型或者符号字型盡量小。

# 數字字型
.ff-n { ... }      

3.3 字型大小

使用常見字号。

.fs-36 { font-size: 36px }
.fs-28 { font-size: 28px }
.fs-20 { font-size: 20px }      

3.4 字型顔色

參見色彩主題，以 ​

​fc- ​

​開頭。

3.5 字型樣式

.fw-b { font-weight: bold }
.f-lt { text-decoration: line-through; }      

由于斜體的閱讀體驗不太好，可以不使用。

3.6 字型換行

多行文字，尤其是涉及到較長英文的内容，需要換行支援。

.f-wb {
    word-wrap: break-word;
    word-break: break-all;
}      

3.7 文字對齊

可以考慮使用，也可以考慮使用布局替代。

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }      

4 修飾

4.1 修飾說明

用于強化元素表現，達到更好的表達效果。

修飾的方式很多，按需選用即可。

4.2 邊框

使用邊框樣式，使用寬度 ​

​border-width​

​​、樣式 ​

​border-style ​

​​和顔色 ​

​border-color​

​ 分别定義。

由于邊框使用頻繁，可以定義組合樣式全邊框 ​

​line-all​

​，降級為原子樣式。

.line-all { 
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
}

.line-bottom { ... }

.line-width-2 { border-width: 2px; }

.line-color-red { border-color: #990000 }
...      

4.3 圓角

使用​

​border-radius​

​定義，根據需要分别定義左上、左下、右上、右下圓角。

特别定義一個圓形。

.round {
    border-radius: 50%;
    display: flex;
    overflow: hidden;
}

.br-36 {
    -webkit-border-radius: 4.8vmin;
    border-radius: 4.8vmin;
}

.br-l-36 {
    -webkit-top-left-radius: 4.8vmin;
    border-top-left-radius: 4.8vmin;
    -webkit-bottom-left-radius: 4.8vmin;
    border-bottom-left-radius: 4.8vmin;
    display: flex;
    overflow: hidden;
}

.br-r-36 {
    -webkit-top-right-radius: 4.8vmin;
    border-top-right-radius: 4.8vmin;
    -webkit-bottom-right-radius: 4.8vmin;
    border-bottom-right-radius: 4.8vmin;
    display: flex;
    overflow: hidden;
}

.br-bl-36 {
    border-bottom-left-radius: 4.8vmin;
    border-top-left-radius: 4.8vmin;
}

.br-br-36 {
    border-top-right-radius: 4.8vmin;
    border-bottom-right-radius: 4.8vmin;
}      

4.4 陰影

根據需要使用陰影 ​

​box-shadow​

​。

.box-shadow5 {
    box-shadow: 0px 5px 10px #d8d8d8;
}      

4.5 透明度

按需定義即可，使用 ​

​opacity​

​ 屬性。

.op5 {
    opacity: 0.5;
}      

5 變換

5.1 旋轉

元素根據需要可能要旋轉，使用變形 ​

​transform​

​。

.r180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}      

6 小結

原子樣式的分類要合理，可擴充。

命名規則明确。常用的使用簡稱，必要時使用全稱，避免混淆。

具體樣式要少。按需定義，不使用的要删除。

更多閱讀：

1 ​​display - CSS（層疊樣式表） | MDN (mozilla.org)​​