前端大神與碼農的區別：你在小瞧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-最佳做法
當您正在考慮哪些物件構建時，朱莉指出了這些最佳實踐。
物件應該有一個單一的責任；他們應該做一件事情好，一件事。
它們應該完全封裝起來；物件應該能夠站在自己的位置上，並且到處都是一樣的。
為物件、修飾符和狀態使用類。這允許您靈活地混合和匹配這些，而不可能存在過於具體的風險。
選擇一個命名系統並保持一致。有不同的命名格式，所以形成一個團隊作為計劃。比如，CamelCase還是沒有CamelCase？你如何辨認孩子、州、修飾詞…大邊界元方法(
.block__element--modifier)?決定使用語義和/或表示命名。這是一個熱門話題，但是要向你的團隊提供幫助是值得的。
語義引數
課堂是否有實際的語義價值？
對誰來說，類語義是什麼？
課堂應該是語義而不是表象嗎？
是否更好地擁有一個語義類或多個混合類？
例子：
.section-heading,.item-content
表象論證
類對瀏覽器沒有意義。它只是用作匹配機制。
類對於開發人員來說是語義上的。
表示類是可重用的，並且不與內容相關聯。
內容描述自己；類不需要。
例子：
.padding-top-large,.no-margin
你想要什麼？
乾燥html(語義)或乾燥的css(表示)
您是否有任何約束，比如無法訪問css？你是否設計了一個第三派對工具被吐出來的html？
你可以混合使用。使用語義模組類和表示實用程式類可能對您的團隊最有效。
怎樣才能開始使用模組化css？
不知道從哪裡開始？以下是朱莉關於下一步做什麼的祕訣。這是一個偉大的討論點，以培養您的團隊，因為您將想要制定一個計劃，為您的情況最好的工作。然後從那裡採取小步驟開始收穫模組化系統的好處。
使用css預處理程式，例如Sass。使用分頁、巢狀和子元素。這些有助於使重複變得更好。
建立公約。選擇命名系統、分類系統、定義程式碼格式化標準並記錄所有內容。
開始迭代抽象您的站點。從基礎樣式開始-
html, body, p, a, h1-h6等然後構建塊物件-lists, nav, buttons, media。之後，對複合物件進行工作-headers, footers, masonry cards, sidebars.不斷地隔離程式碼直到找到一個舒適的粒度級別。
停止使用css選擇器用於非css(例如javascript、特徵規範等等)。
建築師是個styleguide。在應用程式中構建它之前，在樣式嚮導中構建元件(幫助確保封裝)。如果一個班級要打破其他地方的東西，那麼測試也是個不錯的測試平臺。
“組織，優化，重複直到你感到沒有痛苦”-朱莉卡梅隆
記住：每個人都做得不一樣。有很多想法和意見。四處玩玩，找出最適合你的東西。