CSS的發(fā)展動向
一、使用全局命名空間寫css,用命名規(guī)范來避免命名沖突和重用性雕欺，需要程序員的功力
一旦你使用了全局命名空間（Global namespaces），就相當(dāng)于打開了一扇麻煩的大門。麻煩就很快的到來屠列。如果在代碼中沒有為對象提供唯一的名稱蛛枚，那么你將不可避免地面臨命名沖突、各種副作用以及無法維護(hù)的代碼問題相繼到來脸哀。對于CSS來說蹦浦，這意味著有布局的Bug，有CSS權(quán)重]的煩惱撞蜂，很長的選擇器和無法調(diào)試的CSS盲镶。因為每個選擇器都可以針對不需要的元素，并與其他選擇器發(fā)生沖突蝌诡。
因為我們的社區(qū)有很多有才華的人溉贿，讓我們有了OOCSS、BEM浦旱、SMACSS和其他類似的方法宇色。這些都是非常有用的方法。他們通過預(yù)先設(shè)置好的類來解決命名沖突的問題颁湖。
他們的主要問題是手工操作宣蠕，我們必須自己編寫這些很長的選擇器。但你也可以使用處理器（less sass等）來處理甥捺，不過它只是消除效果抢蚀，而不是原因。這個問題仍然存在镰禾。
編寫CSS代碼時都有哪些痛點(diǎn)
全局污染 - CSS的選擇器是全局生效的皿曲，所以在class名稱比較簡單時，容易引起全局選擇器沖突吴侦，導(dǎo)致樣式互相影響屋休。
命名混亂 - 因為怕全局污染，所以日常起class名稱時會盡量加長备韧，這樣不容易重復(fù)劫樟，但當(dāng)項目由多人維護(hù)時，很容易導(dǎo)致命名風(fēng)格不統(tǒng)一盯蝴。
樣式重用困難 - 有時雖然知道項目上已有一些相似的樣式毅哗，但因為怕互相影響，不敢重用捧挺。
代碼冗余 - 由于樣式重用的困難性等問題虑绵，導(dǎo)致代碼冗余。
在CSS的進(jìn)化歷史上闽烙，出現(xiàn)過各種各樣的框架致力于解決以上的問題：
重用性：
**SASS, LESS - 提供了變量翅睛、簡單函數(shù)声搁、運(yùn)算、繼承等捕发，擴(kuò)展性疏旨、重用性都有了很大的提升，解決了一些樣式重用冗余的問題扎酷，但是對于命名混亂問題的效果不大檐涝。
命名：
**BEM (.block__element--modifier) - 比較流行的class命名規(guī)則，部分解決了命名混亂和全局污染的問題法挨，但class定義起來還是不太方便谁榜，比較冗長，而且和第三方庫的命名還是有可能沖突凡纳。
二窃植、出現(xiàn)模塊化CSS
CSS Modules - 模塊化CSS
將CSS文件以模塊的形式引入到JavaScript里，基本上解決了全局污染荐糜、命名混亂巷怜、樣式重用和冗余的問題，但CSS有嵌套結(jié)構(gòu)的限制（只能一層）暴氏，也無法方便的在CSS和JavaScript之間共享變量延塑。
例子
生成的dom結(jié)構(gòu)如下圖，基于css文件中的class名稱生成了唯一的class名稱偏序，樣式會定義到生成的class上页畦。
JSON文件styles 來存儲原始類和映射出來的類胖替。
CSS-in-js (在JavaScript里寫CSS)
現(xiàn)在隨著組件化概念的流行研儒，對從組件層面維護(hù)CSS樣式的需求日益增大，CSS-in-JS就是在組件內(nèi)部使用JavaScript對CSS進(jìn)行了抽象独令，可以對其聲明和加以維護(hù)端朵。這樣不僅降低了編寫CSS樣式帶來的風(fēng)險，也讓開發(fā)變得更加輕松燃箭。它和CSS Modules的區(qū)別是不再需要CSS樣式文件冲呢。
多用在react框架中
CSS-in-JS框架有很多，介紹流行的2個
styled-component（攜帶樣式的組件）
會生成唯一的class名稱招狸，解決命名混亂和全局污染的問題敬拓。組件相關(guān)的代碼都在一起，可以統(tǒng)一查看裙戏，也可以方便的重用樣式乘凸。
glamorous（重寫了一套標(biāo)簽，樣式可以作為標(biāo)簽的屬性來使用）
glamorous的樣式直接以attribute的形式定義在了dom上累榜，之后雖然也為其生成了class名稱及樣式营勤，但這種以attribute定義的方式對偽類選擇符（如 :hover）支持的不好，會帶來一些不方便，而且需要再記住一套attributes名稱和值與真正的css樣式代碼的對應(yīng)關(guān)系葛作。
