資訊專欄INFORMATION COLUMN
摘要：父類為，代表著一系列文章的列表。對(duì)于可讀性較好地與代碼，不應(yīng)該像一本書，而應(yīng)該像一個(gè)故事，一個(gè)故事中會(huì)存在角色和角色之間的關(guān)系，而這種更多的語義化地可以較好地提示你整個(gè)代碼的可維護(hù)性。無論哪種文件組織方式比較順眼，你都應(yīng)該遵循統(tǒng)一的原則。
原文地址。本文從屬于Web 前端入門與最佳實(shí)踐。
CSS的學(xué)習(xí)是一個(gè)典型的低門檻，高瓶頸的過程，第一次接觸CSS的時(shí)候覺得一切是如此簡(jiǎn)單，直到后面越學(xué)越發(fā)現(xiàn)自己一無所知，建議看看張?chǎng)涡窭蠋煹恼f說CSS學(xué)習(xí)中的瓶頸。本文則是從四個(gè)方面來討論如何編寫可擴(kuò)展、可維護(hù)的CSS代碼：
使用合理的語義化命名
模塊化
遵循命名規(guī)范
遵循單一職責(zé)原則
Use Proper Semantics:使用合理的語義化命名在HTML與CSS中都存在著語義化標(biāo)記的概念，Semantics即是單次的語義和其關(guān)聯(lián)，在HTML中一個(gè)簡(jiǎn)單的示意如下：
語義化的HTML能夠比較直接的表示出某個(gè)標(biāo)記的功能，另一方面，Semantic CSS會(huì)更加地抽象與主觀化。編寫語義化地CSS代碼意味著你選定的樣式類名要能夠簡(jiǎn)單明了的反映出結(jié)構(gòu)與功能信息。另一方面，樣式類命名的時(shí)候可以不用太過具體化，這樣也方便你復(fù)用樣式類。
這里我們以Medium的CSS進(jìn)行一個(gè)說明：
從上述代碼中，你可以迅速辨別出結(jié)構(gòu)、角色和含義。父類為stream，代表著一系列文章的列表。而第一個(gè)子類為streamItem，即列表中的某個(gè)文章的實(shí)體，這就明顯表現(xiàn)出了子類與父類之間的從屬關(guān)系。另外，這樣一個(gè)類與結(jié)構(gòu)可以在任何包含文章的頁面上完成復(fù)用。對(duì)于可讀性較好地HTML與CSS代碼，不應(yīng)該像一本書，而應(yīng)該像一個(gè)故事，一個(gè)故事中會(huì)存在角色和角色之間的關(guān)系，而這種更多的語義化地CSS可以較好地提示你整個(gè)代碼的可維護(hù)性。下面推薦幾個(gè)深入閱讀的文章：
What Makes for Semantic Class Names
Naming CSS Stuff is Really Hard
Semantics and Sensibility
[About HTML semantics and front-end architecture](
http://nicolasgallagher.com/a...
Modularize:模塊化在像React這樣的基于組件的項(xiàng)目中，模塊化就是根本地準(zhǔn)則。通過創(chuàng)建可復(fù)用可組合的模塊可以將整個(gè)系統(tǒng)合理解耦。
上圖中每個(gè)藍(lán)色塊內(nèi)就代表一個(gè)組件：
大部分的組件又可以拆分為更多的小組件：
每個(gè)Stream Item都含有一個(gè)縮略圖和特征信息：
因?yàn)閟tream組件不依賴于其子組件，因此可以隨意地修改post類而不會(huì)對(duì)stream類有明顯地影響。一般來說，代碼之間的耦合程度越低，代碼的可修改性與可維護(hù)性就越好。
深入閱讀：
CSS Architectures: Scalable and Modular Approaches
Writing Modular CSS with Sass
Modularizing Your Front-End Code for Long Term Maintainability and Sanity
選擇一個(gè)好的命名約定目前已經(jīng)有了很多的優(yōu)秀的CSS命名約定規(guī)范，不過最好的CSS命名規(guī)范還是最適合自己的，因此筆者自己的感覺就是選一個(gè)最順眼的命名約定然后將它改造成適合自己的項(xiàng)目的規(guī)范。
Object oriented CSS OOCSS
Block element modifier (BEM)
Scalable and modular architecture for CSS (SMACSS)
Atomic
我個(gè)人最喜歡的一個(gè)命名規(guī)范就是BEM：
BEM是最簡(jiǎn)單，不過也是最嚴(yán)格的命名規(guī)范：
.block {}
.block__element {}
.block--modifier {}
上述代碼中的Blocks代表了高等級(jí)的一些類，Elements則是Blocks的子元素，而Modifiers代表了不同的狀態(tài)。
在上述例子中，search類是一個(gè)Block，而Search Button則是它的一個(gè)子元素，如果你希望修改按鈕的狀態(tài)，那么應(yīng)該添加一個(gè)類似于active的Modifier。另外你需要記住的是，未來你工作的代碼庫里很有可能會(huì)出現(xiàn)多個(gè)命名規(guī)范，你也要學(xué)會(huì)兼容并包，能夠接受學(xué)習(xí)其他的一些標(biāo)準(zhǔn)。如果你希望對(duì)于BEM進(jìn)行深入了解，那么可以閱讀以下文章：
Getting your head ’round BEM syntax
BEM 101
Intro to BEM
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
遵循單一職責(zé)原則SRP原則即只每個(gè)模塊或者類只應(yīng)承擔(dān)軟件系統(tǒng)中的某個(gè)單一功能，并且該職責(zé)應(yīng)該完整地封裝在類的內(nèi)部，即對(duì)外屏蔽內(nèi)部實(shí)現(xiàn)。而具體到CSS的領(lǐng)域里，SRP意味著某個(gè)代碼片、類或者模塊只應(yīng)該做一件事。而在CSS的文件組織上，意味著像Carousels、Navigation Bar這樣的組件應(yīng)該有自己獨(dú)立的CSS文件。
/components |- carousel |- |- carousel.css |- |- carousel.partial.html |- |- carousel.js |- nav |- |- nav.css |- |- nav.partial.html |- |- nav.js
另一個(gè)常見的文件組織方式就是按照功能進(jìn)行文件組織，舉例而言，在上述的代碼片中，所有關(guān)于Carousel的文件都應(yīng)該被放到同一個(gè)文件夾中。通過這種方式可以將文件索引變得更加容易。同樣地，對(duì)于常見的全局樣式而言，也需要適用于獨(dú)立地全局樣式：
/base |- application.css |- typography.css |- colors.css |- grid.css
在上述例子里，不同類型的全局樣式需要分割到不同的文件中，這樣的話如果你需要去更改你的顏色等等樣式，那就很容易找到修改哪個(gè)文件。無論哪種文件組織方式比較順眼，你都應(yīng)該遵循統(tǒng)一的SRP原則。如果某個(gè)文件變得冗余臃腫，你應(yīng)該考慮根據(jù)邏輯或者其他東西對(duì)內(nèi)容進(jìn)行切分。關(guān)于文件組織結(jié)構(gòu)與CSS結(jié)構(gòu)方面地深入閱讀：
Aesthetic Sass 1: Architecture and Style Organization
Scalable and Maintainable CSS Architecture.
對(duì)于每個(gè)獨(dú)立的CSS類而言，都應(yīng)該只包含一個(gè)功能。換言之，應(yīng)該根據(jù)關(guān)注點(diǎn)的差異將樣式切分到不同的類中，這里有個(gè)小例子：
.splash {
background: #f2f2f2;
color: #fffff;
margin: 20px;
padding: 30px;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
在上面這個(gè)例子里，我們搞錯(cuò)了某些關(guān)注點(diǎn)，splash類不僅包含了其自己的展示的樣式與邏輯，還定義了部分關(guān)于其子元素的樣式，因此需要切分到兩個(gè)多帶帶類中：
.splash {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.splash__content {
background: #f2f2f2;
color: #fffff;
padding: 30px;
border-radius: 4px;
}
深入閱讀：
The single responsibility principle applied to CSS
Single Responsibility.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115319.html
摘要：簡(jiǎn)單高效的自定義方式對(duì)于這些情況我們可以使用一個(gè)強(qiáng)大的瀏覽器插件，簡(jiǎn)稱，中文俗稱為油猴，支持和瀏覽器。簡(jiǎn)單幾行代碼，就可以去除大部分頁面廣告。聲明需要使用的函數(shù)。 會(huì)CSS就會(huì)去廣告~ 傳統(tǒng)去廣告方法的弊端 我們?yōu)g覽網(wǎng)頁的時(shí)候經(jīng)常不免會(huì)看到各種不想看到的廣告內(nèi)容，最簡(jiǎn)單的方案就是通過瀏覽器插件來解決，比如大名鼎鼎的AdBlock插件以及國(guó)內(nèi)的各種廣告攔截助手。 但這些插件的攔截能力可...
摘要：簡(jiǎn)單高效的自定義方式對(duì)于這些情況我們可以使用一個(gè)強(qiáng)大的瀏覽器插件，簡(jiǎn)稱，中文俗稱為油猴，支持和瀏覽器。簡(jiǎn)單幾行代碼，就可以去除大部分頁面廣告。聲明需要使用的函數(shù)。 會(huì)CSS就會(huì)去廣告~ 傳統(tǒng)去廣告方法的弊端 我們?yōu)g覽網(wǎng)頁的時(shí)候經(jīng)常不免會(huì)看到各種不想看到的廣告內(nèi)容，最簡(jiǎn)單的方案就是通過瀏覽器插件來解決，比如大名鼎鼎的AdBlock插件以及國(guó)內(nèi)的各種廣告攔截助手。 但這些插件的攔截能力可...
摘要：無論是早期工具，還是現(xiàn)在流行的配合這類構(gòu)建工具而產(chǎn)生的雪碧圖插件。 本文原文鏈接：https://devework.com/postcss-...，轉(zhuǎn)載請(qǐng)注明原始來源，謝謝！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個(gè)基于PostCSS 開發(fā)的用于生成雪碧圖圖片及其C...
摘要：因?yàn)檫@對(duì)于一個(gè)剛參加工作的工程師來說，這有可能就是一月和一個(gè)月的區(qū)別了。多編寫網(wǎng)站編程說到底其實(shí)也就是一門手藝，就對(duì)于智商差不多的程序員來說，技藝的高超程度往往就在于練的多少了。 利益相關(guān)：以下的所有文字都是僅代表個(gè)人觀點(diǎn)，不代表全組織的利益。 本人就是一大三狗，自學(xué)PHP時(shí)間已經(jīng)快兩年了，感覺自己還是一個(gè)入門級(jí)的選手。說說自己是如何一步步走過來的。 1. 官方文檔 對(duì)，我還是堅(jiān)...
摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
閱讀 2343·2021-09-27 14:04
閱讀 2056·2019-08-30 15:55
閱讀 1927·2019-08-30 13:13
閱讀 1249·2019-08-30 13:07
閱讀 2919·2019-08-29 15:20
閱讀 3387·2019-08-29 12:42
閱讀 3517·2019-08-28 17:58
閱讀 3773·2019-08-28 17:56
