上週我廠前端小夥伴們開了乙個技術交流會，關於如何優選css架構、解決掉平時寫css時頻繁出現的各種問題，這是前端人員老生常談的問題，但卻很少搬上檯面，鋪開正式地開交流會。這次會議，便是圍繞css架構以及尋求解決css頑疾的解決方案這兩個中心點展開。
1.自己理想中的css架構
2.現如今專案中css維護存在的問題
3.自動化工具的選擇
4.檔案結構與命名規範
1.復用性強，作為元件可引入不同專案，低耦合，對原有css無汙染
2.結構框架清晰，簡單明瞭
3.命名規範、易懂，有注釋，**閱讀無障礙
1.因沒有事先規範，後期維護困難，無從下手，越維護越臃腫，到最後專案的css病入膏肓
2.css容易衝突。當修改眼前這個彈層，也許另外幾個彈層都受影響，耦合度高
3.css表結構沒有區分好，混亂
4.css拓展性不強
gulp webpack postcss
這部分內容併入要點
2.命名樣式時，不要用特定的屬性命名，如字型大小：f16、f18。當你這麼命名，如果需求有修改用f15、f17,這種字型大小時，無法全域性修改（按鈕同理，純粹的btn-ok、btn-cancel無法應對後發需求）。可以用x、s、l、xl這類抽象代號，達到多型效果：同乙個樣式命名，可以隨時更換css具體值，不同輸出
3.css的可拓展性很重要。不要直接用標籤定義樣式，容易耦合。也不要用通用性高的類名，如title，這種命名率很高，假如你引入外掛程式或者外來樣式表，很可能也有這麼乙個title，發生衝突
4.考慮是否使用某個css架構時，要多方面考慮，如果對於團隊來說學習成本過高，那麼這個架構弊大於利（css-helper）
5.css檔案表如何區分？先考慮各個模組是什麼功能，用來做什麼的，把同類別的模組歸類，再合併成乙個同類的css檔案，以類別分表
6.css命名時，通過樣式用途命名，有命名空間的概念。例如c-就是元件，這樣當你命名時，可以通過樣式名一眼就看出這個樣式是幹什麼的
7.做任何專案之前，都要先定乙個大家都來遵守的規範，互相監督。這個規範可以隨著專案的實際需要而變化，開發人員一起維護這個規範。當某一條規範不明確或有爭議，要丟擲問題，先解決問題，再開發。
1.oocss、bem寫法有缺陷：解放了css但html會變得臃腫。這兩者如何取到乙個平衡點？
2.oocss、bem各有優缺點，能否通過混搭使用，進行互補？
3.隨著開發程序，sass檔案會越來越大，在webpack編譯中會越來越慢。能否通過使用postcss這個自動化工具來取代sass？
跨域和解決方案
代補充 什麼是跨域 當乙個請求url的協議 網域名稱 包括子域 埠三者之間任意乙個與當前頁面url不同即為跨域。注 網域名稱和網域名稱對應的ip之間也屬於跨域 什麼是同源策略 sop same origin policy 是一種約定，是瀏覽器最核心也最基本的安全功能，否則瀏覽器容易受到xss csf...
css布局解決方案
總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...
CSS布局解決方案
使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...