在寫 CSS 以前你應該瞭解的一些東西

前言

在平常開發過程當中，團隊成員的 CSS 寫法多樣，不一樣成員會有不一樣的命名方式，形成總體的樣式結構比較混亂，同時，因爲對 CSS 的部分認知有點誤差，寫出來的樣式代碼健壯性不高，且難以維護。所以，本文提供了一個基礎的指南和規範，讓團隊的同窗在編寫 CSS 代碼以前能有一個簡單的參考。

本文主要分爲兩部分，第一部分爲基礎的命名規範，第二部分爲一些容易致使認知誤差的基礎知識。

BEM 命名規範

類命名上應當採用 BEM 規範，一般遵循如下模版。

.type-block__element--modifier
複製代碼

type

該屬性規定一個類名的類型。 咱們作以下約定：

1. .c-block__element--modifier 表明一個組件
2. .o-block__element--modifier 表明一個不可分割組件
3. .dt-antd-block__element--modifier 表明自定義 antd 元素樣式
4. js-block__element 表明這是一個腳本依賴的類名。

block，element，modifier

這邊咱們用一個例子來講明。

Html結構以下

<ul class='c-list'>
  <li class='c-list__li'>1</li>
  <li class='c-list__li c-list__li--highlight'>2</li>
  <li class='c-list__li'>3</li>
  <li class='c-list__li'>4</li>
  <li class='c-list__li'>5</li>
</ul>
複製代碼

整個 list 是一個 block，而每一個 li 元素其實就是一個 element， 因此咱們用了 c-list 來表示 list，用 c-list__li 來表示 每個 li 元素，同時，用了 c-list__li--highlight 來表示須要高亮的元素。

CSS 常見誤區與基礎

height

設置 height 百分比屬性的時候，父元素必須有一個 height 屬性（max-height 也不行）或者爲高度可確認的絕對定位元素。

padding

1. padding-top 和 padding-bottom 只會對塊級元素生效。

   

2. padding 百分比 屬性是相對於父元素的寬度。

3. 請不要用 padding-top: ??px; 來實現垂直居中。

   CSS 垂直置中的七個方法

float

浮動屬性的目的原本只是爲了實現圖片和文字的環繞效果，用來作佈局會有以下幾個反作用：

1. 元素文字之間不是根據基線對齊的。

   

2. 浮動元素的高度不計入父元素高度計算。

   

z-index

這個屬性能夠控制元素的顯示層級，越大顯示越靠前。可是其實遠沒這麼簡單。

有以下一段代碼

由於給 b 設置了 負的 margin，因此， b 會與 a 重疊 。這時，咱們想讓 a 覆蓋 b ，給 a 設置一個 z-index：999。結果發現，並無任何做用。 b 仍是穩穩的蓋在了 a 的上面。

咱們再給 a 加一個屬性。position：relative；

a 成功蓋住了 b。有點經驗的同窗應該知道， z-index 只在 已定位元素上纔會生效。因此這邊，加上了 定位屬性才能獲得預期的效果。

咱們再改一下代碼。

咱們去除了 定位屬性 和 z-index 屬性，加上了一個 transform 屬性。結果發現， a 仍是蓋住了 b 。這邊 沒有定位屬性， 也 沒有 z-index，爲何 a 仍是會蓋住 b 呢？

不清楚的同窗能夠看一下這篇文章 CSS Stacking Context裏那些不爲人知的坑

font-size

誤區：字體內容高度不等於font-size

咱們設置了 字體大小 和 行高 爲 20px，可是，瀏覽器實際顯示區域爲 28px。這個具體的大小和字體類型是有關係的。

line-height

咱們來看一個例子來講明這個屬性

這邊有兩個問題

1. 咱們設置了 text 的行高爲 50px，可是，他的內容區域實際只有 28px。並且，根據父元素的背景色能夠知道，計算時候的區域高度其實達到了 50px。
2. 爲何會垂直居中？

能夠用一張圖來解釋。

由於 內容區域爲 28px，可是 行高爲 50px，因此，多出來的 22px 會 平均分佈於內容區域的 上下兩側，從而使得 內容區域居中。由於 行內框只是一個佈局時的概念，並不會實際顯示出來，因此咱們右鍵選擇的實際上是內容區域，高度只有 28px。

具體能夠查看 深刻理解文字高度和行高的設置