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

darkerXi 發布于2019-08-30 15:53 / 529人閱讀

摘要：上兼容微信瀏覽器和瀏覽器，支持的版本隨系統版本。主要在微信瀏覽器內訪問。移動端高清屏框架用的方法是方法。當然就需要框架考慮的東西更多了。只要管理好對話框的即可。對話框彈起關閉都發出事件通知到背景即可。

兼容

pc web：比如 MA Station。基于chrome，可以手機訪問（需要業務做適配）。 android 上兼容微信瀏覽器和 QQ瀏覽器，safari 支持 iOS > 8（safari 的版本隨系統版本）。比較任性。

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

safari 的兼容測試可以用 mac 自帶的模擬器 simulator 來測試，非常方便。

bootstrap

基于老牌的 bootstrap，相對簡單易用。v4 現在還在 beta 中，如果正式了還是可以考慮遷移的。或者 beta 階段遷移。

less

因為 bootstrap3 是 less ，移動端基于所以也就用了 less，實際上 sass 更強大。bootstrap4 也采用了 sass。等遷移到 bootstrap4 后我們也會采用 sass 的，就是這么任性。

less 函數有個特性有點奇怪，我用過，不過不具備可維護性，不建議大家用。

// 正常情況

.fun1(){
    background: red;
}

.aaa{
    .fun1();
}

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

.aaa{
    .class1();
}

flex

web 開發都是基于 flex 的，這給我們的布局很大的方便，非常的靈活，可以很簡單的。

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

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

移動端高清屏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 也是組合思想

組合思想帶來的好處是

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";

浮層管理

這個話題也可以說浮層的管理。開發者越少關心 z-index 越好，組件提供了封裝。當然就需要框架考慮的東西更多了。

層級大致是

正常的文檔流 1

modal 1000

tip 9999

另外 modal 衍生出來的 Dialog 形態即對話框，要求只有一個。不能出現彈窗中有彈窗。技術上可以做到彈窗有彈窗，但克制，不提供相應的能力。

position fixed

移動端是禁用 position:fixed 的，不過多介紹 http://efe.baidu.com/blog/mob...

vm vh rem px

我個人是比較傾向于用 px 的。因為很簡單，切和 pc web 的開發習慣一致，也是大家開發網頁的默認單位。無須什么轉換成本，上手就來。

當然如果是設計驅動的公司，要求高保真還原設計稿，就不太一樣了，會考慮用 rem 方案。基于兼容性考慮，我們可以直接用 vm vh。http://www.w3cplus.com/css/vw...

btw，個人還覺得 rem 在執行上很麻煩，也有對 rem 不了不深的原因。

毛玻璃

場景是對話框彈起來的時候背景出現毛玻璃效果。

這里的關鍵是背景的 dom 和對話框不能是包含關系，然后對背景 dom 做 filter:blue(2px)。只要管理好對話框的 dom 即可。

另外關鍵是，背景 dom 什么時機設置 filter，什么時候取消 filter。于是引入了事件。對話框彈起關閉都發出事件通知到背景 dom 即可。

框架層架構

框架層采用了 flex 布局，給了指定區域做業務，業務只需也只能關心該區域，不能干擾其他區域，如需，需要討論商量好。

業務區域做內滾動，這 part 其實不太好，后面想重構掉。不好的地方有，1 滾動只要指定 dom 非 document.body。 2 跟隨 dom 的彈窗不好做，需要計算位置。

css3

由于瀏覽器的環境很良好，所以可以嘗試很多 css3 的特性，也不一定是 css3，大致意思是可以用上很多高級的功能。比如 calc、filter 等。

圖標

堅決不采用 img 來做圖標。采用 iconfont ，我們的字體托管在 iconfont.cn 平臺。 iconfont 只能做單色，多色等不復雜的圖片。如果滿足不了則考慮 css3 或者 svg 方向。

GPU云服務器云服務器前端css框架角度看 js和前端框架的優勢 css框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116662.html

前端架構涉及到哪些范圍？

摘要：前后端都要關注注入攻擊跨站腳本攻擊跨站請求偽造開放重定向這些安全性問題。前端也需要構建自動化測試，包括獨立單元測試和端到端測試自動化，當然還有人工測試。總體指導思想是前后端分離，后端同事提供線上API數據查詢接口或websocket接口，前端同事負責處理獲取到的數據、編寫展示的頁面、實現用戶交互；前后端都要考慮web開發的安全性問題，表單提交到數據庫前對用戶的輸入進行轉義、登錄避免明...

dmlllll 2019-08-21 11:50 評論0 收藏0
前端架構涉及到哪些范圍？

摘要：前后端都要關注注入攻擊跨站腳本攻擊跨站請求偽造開放重定向這些安全性問題。前端也需要構建自動化測試，包括獨立單元測試和端到端測試自動化，當然還有人工測試。總體指導思想是前后端分離，后端同事提供線上API數據查詢接口或websocket接口，前端同事負責處理獲取到的數據、編寫展示的頁面、實現用戶交互；前后端都要考慮web開發的安全性問題，表單提交到數據庫前對用戶的輸入進行轉義、登錄避免明...

kk_miles 2019-08-29 13:07 評論0 收藏0
阿里云前端周刊 - 第 26 期

摘要：小米直達服務探秘，如何保證移動體驗小米直達服務是小米推出的混合開發框架，它可以實現秒開，同時可以在瀏覽器短信微信等地方打開。本文即是小米直達服務體驗保障方面的實踐分享，討論了目前移動體驗的瓶頸小米直達服務的機制與核心關鍵等內容。推薦 1. Node.js 8.5.0 發布 https://nodejs.org/en/blog/re... 已經發布的 Node.js 8.5.0 版本中...

beanlam 2019-08-21 16:43 評論0 收藏0
13個幫你提高開發效率的現代CSS框架

摘要：官網是圍繞構建的，是一個免費的開源框架。官網在壓縮后僅為，以移動優先的理念為中心。官網被稱為輕量級響應式現代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進一步開發個性化的。官網有時框架可以包含僅對其原始開發人員有意義的類名。翻譯：瘋狂的技術宅原文：https://1stwebdesigner.com/mo... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的...

xumenger 2019-08-30 10:52 評論0 收藏0