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