CSS被設(shè)計成是一個非常簡單和直觀的語言。它的基本目的是定義選擇目標(biāo)HTML元素和應(yīng)用屬性給他們。易于掌握并開始應(yīng)用。對大型復(fù)雜項(xiàng)目時，雖然一些CSS功能可能會有點(diǎn)麻煩要處理。其級聯(lián)功能，例如，允許屬性，以由其他的選擇器，根據(jù)其上的片材或由順序重寫選擇特異性。此外，…
CSS被設(shè)計成是一個非常簡單和直觀的語言。它的基本目的是定義選擇目標(biāo)HTML元素和應(yīng)用屬性給他們。易于掌握并開始應(yīng)用。對大型復(fù)雜項(xiàng)目時，雖然一些CSS功能可能會有點(diǎn)麻煩要處理。
其級聯(lián)功能，例如，允許屬性，以由其他的選擇器，根據(jù)其上的片材或由順序重寫選擇特異性。此外，元素繼承父母的DOM屬性。如果沒有適當(dāng)?shù)慕M織，這樣可以很快失控和雜亂的。這就是一個架構(gòu)來幫助。
什么是CSS架構(gòu)？
一個CSS架構(gòu)帶來推理CSS創(chuàng)作。把它想象成一組指導(dǎo)原則和最佳實(shí)踐，幫助開發(fā)人員編寫的代碼的可維護(hù)性，靈活性，大規(guī)模和更具重用性。我們通過實(shí)現(xiàn)這一應(yīng)用模塊化方法，促進(jìn)組織和傳達(dá)的意義我們的代碼庫。我們將看到如何使用3基本步驟應(yīng)用這些原則。
模塊化是一個核心概念。不僅在代碼級，而且對一個設(shè)計之一。數(shù)碼產(chǎn)品已經(jīng)在過去幾年里發(fā)展了很多，由于新設(shè)備的興起和響應(yīng)網(wǎng)絡(luò)。復(fù)雜性已經(jīng)改變。我們作為開發(fā)者和設(shè)計者，要支持這個新的場景。網(wǎng)頁設(shè)計已不再是最好的辦法; 我們應(yīng)該建立設(shè)計系統(tǒng)?；陧撁娴腃SS并不適合于建立靈活的，可擴(kuò)展的產(chǎn)品我們的需求。與可重用的組件工作是要走的路。
上一個CSS結(jié)構(gòu)，模塊化可以在幾個層次上被應(yīng)用。這三個基本步驟開始構(gòu)建你的CSS這種方式是通過：
打破了代碼轉(zhuǎn)換成更小的塊和范圍將它們分離;
編碼一個獨(dú)立的封裝方式部件;
根據(jù)它們的目的，并與相互關(guān)系命名CSS選擇。
入門
1.分離和分類代碼
為了保持建筑模塊化的，它打破了代碼轉(zhuǎn)換成更小的部分是很重要的。多個文件使代碼更易于閱讀，導(dǎo)航和跟蹤。要做到這一點(diǎn)，一個CSS預(yù)處理器-比如薩斯，LESS或手寫筆 -或者后置處理器-比如PostCSS -是要走的路。預(yù)處理器增強(qiáng)CSS創(chuàng)作的能力，不斷推出新的功能，如變量，混入和更多。要使用單獨(dú)的文件工作，你的代碼將被分為諧音和進(jìn)口上的文件，將一切編譯成一個單一的文件。main.scss.css
一個示例main.scss文件。（劇透：它已經(jīng)歸類：P）
現(xiàn)在是時候根據(jù)其項(xiàng)目范圍進(jìn)行分類每個代碼塊。其中第一個方法那里的介紹選擇分類是SMACSS。通過SMACSS提出的層是基礎(chǔ)，布局，模塊，狀態(tài)和主題。ITCSS擴(kuò)大了這一概念，引入其他層，如設(shè)置和王牌。MVCSS也有類似的做法，但有不同的命名約定。
ITCSS層慣例。
https://speakerdeck.com/dafed/managing-css-projects-with-itcss?slide=49
你不必嚴(yán)格遵循這些方法。學(xué)習(xí)的例子和數(shù)字有什么更好的適合你的項(xiàng)目。在我看來，你的分離架構(gòu)分成設(shè)置，基地，布局和組件是一個良好的開端。設(shè)置是你的配置文件，如變量（顏色，大小，字體定義…）和助手（函數(shù)，混入…）將被保存。該基地層將包含您復(fù)位和unclassed HTML規(guī)則-的方式默認(rèn)的或者應(yīng)該是什么樣子，例如。布局存儲持有頁面上的組件的結(jié)構(gòu)的類-網(wǎng)格和容器，例如。最后，組件：CSS架構(gòu)和設(shè)計系統(tǒng)的核心。<a><input>
2.定義你的組件
我認(rèn)為組件的CSS架構(gòu)的核心，因?yàn)檫@其中大部分的代碼將生活。它們是構(gòu)成用戶接口的可重復(fù)使用的視覺模式 – 按鈕，手風(fēng)琴或模態(tài)，例如。
按鈕組件。
每個組件都應(yīng)該對自己的文件進(jìn)行封裝。出于一致性的原因，它是使用相同的名稱為文件和主選擇一個很好的做法。
一個button.scss文件。
有些組件并不像按鈕一樣簡單。有些比較復(fù)雜，內(nèi)部元素組成。就拿這個博客帖子部件，例如。它有一個縮略圖，一個標(biāo)題，一個摘錄和鏈接。
博客文章組件
有時候，定義組件時，你會問自己什么應(yīng)該是一個較大塊的獨(dú)立組件或部分。要回答這個問題，搜索你的產(chǎn)品或網(wǎng)站的重復(fù)圖案。如果是用在不同的環(huán)境中，它抽象為一個獨(dú)立的組成部分。在博客文章為例，該.link元素是一個單獨(dú)的組件，因?yàn)樗矊W(wǎng)站的其他部分使用。其他元素是特定于博客文章。讓我們來看看如何處理與選擇的名稱這種關(guān)系。
3.應(yīng)用的命名約定
請記?。何覀兿Ｍ覀兊募軜?gòu)以傳達(dá)意義和促進(jìn)組織。在使用我們的組件類的命名約定將幫助我們實(shí)現(xiàn)這一目標(biāo)。一種圖案如BEM（塊，單元，改性劑）將澄清的成分（塊）和它的元素之間的意圖和關(guān)系，以及當(dāng)與其他組分相比加強(qiáng)預(yù)見性。背后BEM的想法是根據(jù)本結(jié)構(gòu)來命名的東西：
塊：組件本身;
元件：所述元件的內(nèi)部部分（在DOM后代）;
修飾符：塊或元素的變化。
使用博客文章的例子：
塊
.blog-post { … }
博客文章本身。
元件
.blog-post__excerpt { … }
博客文章內(nèi)的摘錄。為了表示元素和塊之間的關(guān)系，BEM使用兩個下劃線。
變化
.blog-post--small { … }
博客文章，將使其更小的變化。來表示修飾符和塊之間的關(guān)系，邊界元使用兩個短劃線。
在組織層面，這種做法促進(jìn)了一致性和可預(yù)測性在整個組件層。在技術(shù)層面上，它有助于減少選擇的特殊性，提高效率，選擇從DOM結(jié)構(gòu)解耦我們的CSS（因此，促進(jìn)可重用性）。借此另一個例子：
section.container div.grid div p { … }
在這種情況下，瀏覽器必須檢查所有應(yīng)用選擇的條件：
是否有內(nèi)內(nèi)的另一個與類的內(nèi)部與類的？如果是這樣，這個風(fēng)格。<p><div><div>.grid<section>.container
復(fù)雜的，對不對？并在該選擇那蹣跚開發(fā)者可能會問自己：
這是什么選擇上范圍更廣的目的是什么？它是如何涉及到其他的選擇？
該BEM基于類的方法，在另一方面，是更精確且有意義的。瀏覽器只來檢查.blog-post__excerpt的DOM類，這是更performatic。它可以重復(fù)使用，因?yàn)樗痪o密DOM結(jié)構(gòu)耦合。和顯影劑可以假定它是一個的一部分.blog-post的組件。
包起來
這些技巧只是一個起點(diǎn)，一個基本的基礎(chǔ)和結(jié)構(gòu)CSS項(xiàng)目的第一步。關(guān)于這個問題進(jìn)一步閱讀，我建議您訪問這個名單，我已經(jīng)與啟發(fā)本文偉大的開發(fā)商一些真棒思想和方法編制。有很多不同的方法有（很多，真的）。隨時與問題或pull請求做出貢獻(xiàn)吧！
咨詢電話
15050695302
13771112364
咨詢QQ
1309844028