前端大神與碼農的卻別：你在小瞧css，然而我卻早已摸透CSS

css。這是一個網頁設計師的圍欄。有這麼多顏色、類型設置、佈局選項和響應性可能性，將樣式錶轉換成一百萬個行噩夢很容易。可是，只要有幾個簡單的操做，你就能夠清理混亂，這樣css就能與你一塊兒工做，而不是針對你。前端開發人員賦予了一些智慧給我，但我仍然沒法擺脫。如今我與你分享這一切!

你的css可能會一團糟，由於…

這只是天然而已。糾纏發生了。

級聯。這是一種祝福和詛咒。一般狀況下，當您更改一個元素的樣式時，其餘元素無心中會獲得restyled。誤用！重要使級聯出現一個急剎車，並將您的不一致從一個元素樣式到下一個。隨着網站變得愈來愈大，或者愈來愈多的開發者開始在代碼庫上工做，css也會增加。沒有計劃，它就變成了狂野西部(野西.史密斯不會把你弄出這件事的。

您的css與html結構緊密耦合。

另外一個常見錯誤是按照頁面上元素顯示的順序編寫css。當您在一個頁面與其樣式交叉引用時，這可能會有意義，可是一旦您考慮多個頁面使用相同的css，它就會崩潰。若是有多個樣式表，每頁1樣式表，您處於相同的困境。一樣的狀況下，過於特定的css選擇器也傾向於鏡像html。這會致使重複和膨脹…致使了糟糕的表現。這些都不是可伸縮的或者可維護的。

您沒有使用模塊化css

若是你編寫css的方法是仔細地爲每一個元素設計樣式，那麼你就會錯過樹的森林。想象一下，在森林裏凝視着，注意到全部楓樹。您能夠編寫一個類來樣式化全部的楓樹，而不是爲每一個樹編寫重複樣式。這就是您如何將您的設計抽象成可重用塊的方式。

如今，想象一下構建一個登錄頁面而無需編寫單一的css。當您的css所有封裝成可重用的塊時，您就會獲得一個完整的預樣式片斷的寶庫。但這只是其中的一種福利。朱莉強調了使用模塊化css的全部樂趣：

• 模塊化-你能夠從沒有寫任何一條css的狀況下就能到達構建頁面的重點。

• 可預測-無論你把組件放在哪裏，它都會表現得同樣，看起來也同樣。編寫代碼很容易。您有一個命名它的系統。寫起來更直觀。

• 可維護性-這是快速和容易處理的。它不會破壞網站上的其餘東西。

• 可伸縮-很難打破而且容易地創建起來。

• 乾燥-它消除了在css中複製和粘貼複製的需求。

• 有組織-這裏有個地方能夠供你選擇。

什麼是模塊化CSS？

有幾個模塊化解決方案，可是朱莉主要集中在一個叫作OOCSS(面向對象css)。它是一個可伸縮、可維護、語義和可預測的編寫css的方法。妮可·沙利文在爲facebook工做時建立了它。她開始改進一款笨拙的10000行樣式表。她開始看到造型中的圖案，從而致使她建立了一個可重用模塊，稱爲「媒體」對象。經過這樣作，她證實了她能夠節省數百行代碼。媒體對象是包含固定大小媒體元素(圖像或視頻)以及其餘可變大小內容(文本)的內容塊。考慮到這是facebook上最主要的內容形式，性能和可維護性的改善是巨大的！

OOCSS-原則

中的的兩大原則是：從皮膚結構分離到容器分離，從內容分離。

皮膚結構分離意味着將重複模式定義爲可重用結構。例如，什麼使按鈕看起來像按鈕？你可能會說：「圓角、填充和邊框。」而後你可能會重複視覺模式，它充當重複的皮膚。例如，您可能會有一些藍色按鈕和紅色按鈕。這些是兩個單獨的皮膚，由於它們每一個都有不一樣的背景顏色。

容器與內容分離意味着不管您放在哪裏，對象都應該看起來相同。換句話說，避免依賴位置的樣式。例如，若是你正在設計像這樣的h2…

.categoryList h2 { styles }.footer h2 { copied styles }

.你正在重複css的方式，這很難縮放。

這裏有一個更好的方法來樣式化標題。您能夠重用此樣式，即頁眉放置位置的irregardless：

.sectionHeader { reusable styles }

OOCSS-物體

中的的基礎是對象，它是您設計的一部分，能夠在您的站點上重用。對象包含html、css、相似背景圖像的組件以及javascript(任何行爲、偵聽器或方法與對象關聯)。對象能夠包含在模塊中，該模塊可能包含具備變化的基組件。例如，基本按鈕能夠擁有.btn類，也提供這些變體：.btn-primary, .btn-inverse, .btn-warning等等。下面是它在上下文中的外觀。模塊組件按層結構：

• 對象或模塊或組件

  .media

• 修飾符(css設計變體)

  .media--inline, .media__img--right

• 國家(css或js設計調整)

  .media--collapsed, .media.is-active

• 兒童對象(關係)

  .media__img .media__body

OOCSS-最佳作法

當您正在考慮哪些對象構建時，朱莉指出了這些最佳實踐。

1. 對象應該有一個單一的責任；他們應該作一件事情好，一件事。

2. 它們應該徹底封裝起來；對象應該可以站在本身的位置上，而且處處都是同樣的。

3. 爲對象、修飾符和狀態使用類。這容許您靈活地混合和匹配這些，而不可能存在過於具體的風險。

4. 選擇一個命名系統並保持一致。有不一樣的命名格式，因此造成一個團隊做爲計劃。好比，CamelCase仍是沒有CamelCase？你如何辨認孩子、州、修飾詞…大邊界元方法(.block__element--modifier)?

5. 決定使用語義和/或表示命名。這是一個熱門話題，可是要向你的團隊提供幫助是值得的。

語義參數

• 課堂是否有實際的語義價值？

• 對誰來講，類語義是什麼？

• 課堂應該是語義而不是表象嗎？

• 是否更好地擁有一個語義類或多個混合類？

• 例子：.section-heading, .item-content

表象論證

• 類對瀏覽器沒有意義。它只是用做匹配機制。

• 類對於開發人員來講是語義上的。

• 表示類是可重用的，而且不與內容相關聯。

• 內容描述本身；類不須要。

• 例子：.padding-top-large, .no-margin

你想要什麼？

• 乾燥html(語義)或乾燥的css(表示)

• 您是否有任何約束，好比沒法訪問css？你是否設計了一個第三派對工具被吐出來的html？

• 你能夠混合使用。使用語義模塊類和表示實用程序類可能對您的團隊最有效。

怎樣才能開始使用模塊化css？

不知道從哪裏開始？如下是朱莉關於下一步作什麼的祕訣。這是一個偉大的討論點，以培養您的團隊，由於您將想要制定一個計劃，爲您的狀況最好的工做。而後從那裏採起小步驟開始收穫模塊化系統的好處。

1. 使用css預處理程序，例如Sass。使用分頁、嵌套和子元素。這些有助於使重複變得更好。

2. 創建公約。選擇命名系統、分類系統、定義代碼格式化標準並記錄全部內容。

3. 開始迭代抽象您的站點。從基礎樣式開始-html, body, p, a, h1-h6等而後構建塊對象-lists, nav, buttons, media。以後，對複合對象進行工做-headers, footers, masonry cards, sidebars.

4. 不斷地隔離代碼直到找到一個溫馨的粒度級別。

5. 中止使用css選擇器用於非css(例如javascript、特徵規範等等)。

6. 建築師是個styleguide。在應用程序中構建它以前，在樣式嚮導中構建組件(幫助確保封裝)。若是一個班級要打破其餘地方的東西，那麼測試也是個不錯的測試平臺。

7. 「組織，優化，重複直到你感到沒有痛苦」-朱莉卡梅隆

8. 記住：每一個人都作得不同。有不少想法和意見。四處玩玩，找出最適合你的東西。