Re從零開始的UI庫編寫生活之規範制定

時間 2019-11-06

原文原文鏈接

前言

其實很久以前就想寫一些東西了，從大二開始就'入坑'了前端，這樣算來都有4年多了。話說剛入前端時，仍是一個切圖仔，什麼是切圖仔呢？就是在那個先後端未分離，jquery仍是1.x，php仍是最受歡迎語言的時代，你只須要將設計圖還原成靜態頁面，而後在適當的位置留下替換符，就能夠交給後端去處理上線發佈了，真的是至關happy，沒有這麼多花裏胡哨的東西。php

當時市面上流行着很多的前端UI庫，好比最著名的bootstrap，因爲當時接觸了一個有大量冗餘類名的bootstrap項目，致使一直對bootstrap有心理陰影（面對一大堆不知道什麼意思的css類簡直頭痛）。css

想法 SluckyUI

編寫一個具備易記，易用，易開發等特色的高效UI庫，其中這個UI庫又細分爲樣式庫和組件庫，但願這樣將樣式層解耦出來以後能在面對複雜的需求時表現得更加靈活。html

這個UI庫會整合各類優秀案例，好比參考bootstrap的命名方式並進行優化，參考各類優秀的想法並加以實踐。前端

這個UI庫就稱爲SluckyUI，引用自small-lucky，但願能讓你感到小幸運。jquery

但願達到的程度

樣式方面盡最大可能與js解耦，能使用樣式解決的地方就不用js，讓寫樣式再也不成爲負擔，同時又具有必定的跨平臺性質，減輕框架切換帶來的負擔，讓開發者能專一於業務邏輯。webpack

例如一個按鈕，直接用樣式去控制就可以知足絕大部分的需求，因此將經常使用的部分的樣式進行整合就能夠了，不必必須寫成一個組件。web

肯定樣式庫規範

樣式方面將使用sass進行管理sql

命名空間

命名空間是一個樣式庫的重要根基，最出名的是BEM命名方式，但一味地使用BEM命名是難以知足全部需求的，到最後你會發現這html裏全都是一串串難以記憶的字符串，會對後續的維護構成很大的挑戰。咱們的命名須要知足易記，簡潔，易用，規範這幾點要求，咱們將所用到的樣式類分爲如下大概的幾個類別。bootstrap

基礎樣式-可以直觀表達所需的樣式

這類型的基礎樣式是咱們平時用得最多的樣式，凡須要佈局的地方就要用到，屬性和值都很是重要，缺一不可，不然會嚴重影響可讀性，因此採用這種對屬性和值進行簡寫的命名方式。後端

.pt16{
    padding-top:16px;
}

.ta-c{
    text-align:center;
}

.d-f {
    display: flex;
}
...
複製代碼

功能樣式-特殊的構造或一些hack樣式

這類型樣式的特色就是將某一種功能封裝成一個類，但這個功能用基礎樣式的方式去命名又不能直觀表達，這個時候用所對應的功能去命名就再合適不過了。

//文字超出長度後顯示省略號
.ellip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
//出現滑動條
.limit-screen {
    max-height: 700px;
    overflow-y: scroll;
}
複製代碼

狀態樣式-涉及到組件狀態的樣式，如表示成功，失敗，默認的狀態

狀態樣式由屬性/模塊+狀態組成，咱們的關注點是something & status

//普通狀況
.c-success{
    color:green;
}
.c-fail{
    color:red;
}
.bg-warn{
    background-color:yellow;
}

//多狀態的狀況，可參照BEM規則
.color-警示狀態-偏黑色{
    ...
}
.c-hint-b{
    color:#666;
}
.color-成功狀態-偏綠色{
    ...
}
.c-success-g{
    color:green;
}

複製代碼

模塊樣式

對於定製化程度很高的模塊，則應該使用BEM命名

//如自定義的checkbox樣式模塊（爲了方便使用了sass編寫）
.checkbox-box-normalize {
    ...
    & .checkbox-hook {
        ...
    }
    & input {
        ...
    }
    & label {
        ...
    }
}
複製代碼