從觀麥前端框架的角度看css

時間 2019-11-16

標籤前端框架角度 css 欄目 CSS 简体版

原文原文鏈接

兼容

pc web：好比 MA Station。基於chrome，能夠手機訪問（須要業務作適配）。 android 上兼容微信瀏覽器和 QQ瀏覽器，safari 支持 iOS > 8（safari 的版本隨系統版本）。比較任性。css

mobile web：好比下單系統。主要在微信瀏覽器內訪問。html

safari 的兼容測試能夠用 mac 自帶的模擬器 simulator 來測試，很是方便。react

bootstrap

基於老牌的 bootstrap，相對簡單易用。v4 如今還在 beta 中，若是正式了仍是能夠考慮遷移的。或者 beta 階段遷移。android

less

由於 bootstrap3 是 less ，移動端基於因此也就用了 less，實際上 sass 更強大。bootstrap4 也採用了 sass。等遷移到 bootstrap4 後咱們也會採用 sass 的，就是這麼任性。webpack

less 函數有個特性有點奇怪，我用過，不過不具有可維護性，不建議你們用。css3

// 正常狀況

.fun1(){
    background: red;
}

.aaa{
    .fun1();
}

// 一個類名也能夠當函數用，不建議用
.class1{
    background: red;
}

.aaa{
    .class1();
}

flex

web 開發都是基於 flex 的，這給咱們的佈局很大的方便，很是的靈活，能夠很簡單的。web

上面系統的總體兼容性也基本是考慮 flex 的兼容上。chrome

要特別注意的地方是 flex-shrink 即項目的縮小比例，默認爲1，即若是空間不足，該項目縮小。可是不推薦直接操做 flex-shrink，而是用 flex: none 或者 flex: auto。bootstrap

移動端高清屏1px

框架用的方法是 scale(0.5) 方法。不過多介紹，(網上文章不少)[https://juejin.im/entry/584e4...瀏覽器

命名

沒有前綴的 btn 是 bootstrap，前綴 gm- 是 react-gm 庫的。 b- 是業務內的。(鏈接符-)

模塊內部的命名保留模塊，即

// good 長是長了點，可是可維護性可讀性很強
.b-home{
    .b-home-top{
        background: red;
        .b-home-top-btn{
            background: white;
        }
    }
}
// bad 由於可能其餘庫有定義了 top 這個樣式。 這樣就會有被覆蓋的可能性。
.b-home{
    .top{
        background: red;
    }
}

特殊的類名除外，好比 disabled checked error in out on off 等除外。

.b-home{
    .b-home-top{
        .disabled{
            background: gray;
        }
    }
}

less 變量命名同上，只是換成了駱駝峯，去掉了鏈接符

命名上有個出名的 BEM ，不瞭解，哈哈。

組合思想

目標是開發者想實現什麼樣式，經過 react-gm bootstrap 提供的類名來組合便可，這要求他們提供的類名足夠豐富。固然這個想法已經知足了。

至於可能會出現某些場景不知足的（確定會有），作法是

1 是否場景不合理？也多是故意約束，剋制，不提供此功能。
2 提出來討論，共同抽象，沉澱到 react-gm 上。
3 實在特殊的就特殊處理，直接寫在style上。

那組合思想是，其實 bootstrap 也是組合思想

<div className="gm-border gm-padding-5 gm-bg"></div>

<btn className="btn btn-primary btn-lg disabled"></div>

組合思想帶來的好處是

1 可讀性和可維護性加強，經過 className 能想象出 UI。
2 速度快，直接寫 jsx 便可。不用來回切換 js/html css 文件。

分離css

之前 css 是經過 webpack 打包在 js 內的，這樣帶來的壞處是

js 要處理這些 css，天然須要花費時間。同時還阻塞其餘 js 代碼的執行時間。
按照組合思想開發，理論上 css 會不多改動，js 確實常改動。這樣 css 無法獨立緩存。
若是有 dom 的話，會是先 dom 出來，以後加載 js 處理 css 部分。這時會看到頁面沒樣式，忽然又有樣式的閃爍，不太好。理論上 css 最好釋放 head 提早 load。

因此就分離了唄。

降級處理

經過 autoprefixer 來作降級，好比

// 原來
display: flex;

// 處理後
display: -webkit-box;
display: -webkit-flex;
display: flex;

細心的同窗能夠發現，只有 -webkit-，沒有 -ms- -moz- -o-。從兼容性上來考慮，只處理 -webkit- 已足夠。

css module

有短期引入了 css module，不過如今用的不多了。當成的目的是 css module 模塊化，可是帶來了一些問題

css(less) 模塊化後隨 js 的引入而引入，css 即異步加載的
以此同時 less 並無在主框架上，所以無法使用變量函數等。

因而慢慢廢棄。

隨着 react-gm 提供的類名組件完善，後面真正用到 css module 的地方少之又少。因此後面 css module 是會被廢棄掉的。

react-gm.min.css

之前 react-gm 是提供 dist 文件的，即 js 和 css。這樣在開發 Station 系統的時候沒有問題。

可是 MA 要求換種顏色主題，那麼就須要和 bootstrap 同樣，提供一個 theme.css 的文件。要抽出這 part 須要進行改造，工做量是挺大的。

後來 react-gm 廢棄了 dist 形式，直接引入 src 的 index.js 和 index.less 文件。

庫的 css 怎麼引進來

基於上點

// ma index.js
import 'react-gm';
import './index.less'

// ma index.less 覆蓋主題色變量即完成換主題
@brand-primary: #2c9feb;

// react-gm index.js
import './index.less'

// react-gm index.less
@import "less/bootstrap.less";