CSS和HTML很容易理解。 但是，在構(gòu)建網(wǎng)站（和應(yīng)用）以使其可重復(fù)使用的方式中，學(xué)習(xí)最佳的架構(gòu)方法需要花費(fèi)多年的實(shí)踐時(shí)間， 將來可維護(hù)的， 并使開發(fā)人員感到高興。

這里的建筑是什么意思？ 這是CSS代碼的結(jié)構(gòu)。 您將其分離為文件的方式， 類名背后的規(guī)則， 選擇器的深度， 它層疊的方式， 繼承了什么 您如何設(shè)置組件， 頁(yè)面， 元素， 和修飾符。

要將最佳做法應(yīng)用于包含數(shù)百頁(yè)的所有這些網(wǎng)站組件， 各種內(nèi)容， 屏幕瀏覽量 邊緣情況， 考慮添加更多內(nèi)容并修改現(xiàn)有內(nèi)容是困難的部分。

這是要考慮的主要部分之一。 您不應(yīng)該根據(jù)您所在的頁(yè)面來設(shè)置樣式。 不要做。homepage … {} styles。 如果您的頁(yè)面有一個(gè)版塊， 樣式部分。 接著就，隨即， 您也可以在其他頁(yè)面上重復(fù)使用它。 如果有按鈕， 將按鈕樣式設(shè)置為。button {} and reuse it elsewhere。 對(duì)所有視圖均有效。

這是迄今為止可以使用的最常見的建議和效果最好的方法。

現(xiàn)在， 您如何管理頁(yè)面特定的差異？ 因?yàn)檫@是為每頁(yè)設(shè)置樣式的最常見原因？ 出色地， 有幾種方法：

在“ BEM”中， “ M”代表修飾符。 這是。block__child-修飾符外觀。 即使您不使用BEM， 修飾符仍然存在。 如果組件或部分有變化， 為此添加一個(gè)修飾符。

理想情況下， 設(shè)計(jì)人員應(yīng)考慮周全，并盡量減少變化以保持代碼干凈， 但您不必?fù)?dān)心會(huì)添加更多內(nèi)容。 理想情況下，變體應(yīng)該只覆蓋一些屬性，并且應(yīng)該使用相同的標(biāo)記。 這是在HTML階段使用組件的好方法-添加所需的標(biāo)簽，并使它們?cè)谡麄€(gè)網(wǎng)站中保持一致。 不要因?yàn)樾揎椃惗砑有碌摹?/p>

另一種方法是根據(jù)上下文進(jìn)行樣式設(shè)置。 一個(gè)按鈕永遠(yuǎn)是一個(gè)按鈕， 它有它的。按鈕類以及所有內(nèi)容 但您仍然可以調(diào)整它 如果 它是另一個(gè)組件的一部分。 通常這不是一個(gè)好主意，因?yàn)樗鼤?huì)引起不一致， 但這也是一個(gè)很現(xiàn)實(shí)的用例。 否則， 您最終會(huì)得到20個(gè)帶有怪異名稱的修飾符。

上下文相關(guān)樣式是指僅當(dāng)一個(gè)組件是另一個(gè)組件的子組件時(shí)才對(duì)其進(jìn)行樣式設(shè)置。 讓我們以商品卡為例。 默認(rèn)情況下具有其樣式。 但是，如果它是彩色部分的一部分，并且側(cè)面有一些文字， 設(shè)計(jì)要求卡片周圍有一些其他元素（例如動(dòng)畫形狀等）。

在這種情況下， 你用風(fēng)格。父母。card {} selector。 您只需要像使用修飾符一樣覆蓋一些屬性即可。 當(dāng)你這樣做的時(shí)候 卡片本身并不會(huì)增加樣式的復(fù)雜性， 但在特定的邊緣情況下仍然可以正常運(yùn)行。

當(dāng)你想到這個(gè) 您還可以查看如何在“每頁(yè)”基礎(chǔ)上應(yīng)用它。 如果設(shè)計(jì)中存在一些奇怪的邊緣情況，并且與標(biāo)準(zhǔn)組件視圖（以及它們相互交互的方式）有一些細(xì)微的差異， 那么您可以使用來為其設(shè)置樣式。homepage {} selector。 請(qǐng)記住要謹(jǐn)慎使用。 根據(jù)我們的經(jīng)驗(yàn)， 這樣的樣式很少超過幾行代碼。

需要添加的重要說明：上下文風(fēng)格通常不是一種好習(xí)慣。 理想情況下，您甚至不需要它。 大多數(shù)時(shí)候， 您將擁有可以很好地完成這項(xiàng)工作的修飾符。 即使在某些版本中是現(xiàn)實(shí)的， 用嚴(yán)格的規(guī)則深入研究好的抽象代碼可能太昂貴了。

大多數(shù)商業(yè)網(wǎng)站（以及與此相關(guān)的許多其他網(wǎng)站）都將內(nèi)容分為幾個(gè)部分。 每個(gè)部分都是一個(gè)帶有修飾符類的組件，該修飾符類定義了各種屬性。 關(guān)于類的結(jié)構(gòu)的一種建議是：

• 部分。段容器–如果需要，可以將其作為“組件名稱”， 它保持一致的填充/邊距或任何所需的內(nèi)容。
• 部分。section-border-top –是修飾符。 這不使用BEM， 但是您可以根據(jù)需要將其“翻譯”為截面容器邊界。
• 部分。歡迎部分–將是 姓名 的部分。

此處的命名約定也無關(guān)緊要。 有了這樣的部分， 您將可以自由地在設(shè)計(jì)所創(chuàng)建的邊緣情況下將樣式調(diào)整為可重用的組件（這是由于必須遵循的不一致或更復(fù)雜的視圖）。

您很可能會(huì)使用Sass或其他類似的預(yù)處理器。 在文件分離方面， 有很多方法， 但我們采用的是以下一般結(jié)構(gòu)：

• 常規(guī)-常規(guī)通常由設(shè)置代碼組成，例如使網(wǎng)格工作， HTML標(biāo)記的樣式， 重置/歸一化， 一些特定于CMS的樣式等。
• 頁(yè)面–如上所述的頁(yè)面樣式。 理想情況下， 您應(yīng)該在這里保留很少的代碼。
• 組件–構(gòu)建的核心–各種組件都位于此處。 一個(gè)提示是，您可以擁有“元素”或“雜項(xiàng)”，這些元素可以將較小的組件塊放入一個(gè)文件中，而不是80個(gè)文件中。 當(dāng)然，較大的文件最好放在單獨(dú)的文件中。
• 布局-整體風(fēng)格， 例如， 在標(biāo)題上， 頁(yè)腳，然后是頁(yè)面布局， 網(wǎng)格的修飾符，依此類推。
• 插件–插件產(chǎn)生的任何外部信息， 擴(kuò)展名或其他內(nèi)容。 最好將它們分開，然后再在其他項(xiàng)目中重復(fù)使用它們。

干凈代碼的一個(gè)好兆頭是它看起來多么簡(jiǎn)單。 沒有奇怪的屬性， 一切都有目的 壓痕小。 不必要時(shí)“看起來很聰明”的選擇器不會(huì)使您的代碼“很酷”。 如果您可以替代#container之類的東西 > 。row div[rel=”something”] with 。rel-something（想象是一個(gè)有意義的類名）， 那么您應(yīng)該稍微更新一下標(biāo)記。 這樣做的目的是使一切變得更簡(jiǎn)單。

保持較低的縮進(jìn)量。 您很少需要超過三個(gè)級(jí)別。 讓我們來看一個(gè)示例。入門班：

。entry { . }
.entry-title { . }

看到?jīng)]有必要真正縮進(jìn)。里面的條目標(biāo)題。入口。 之后， 在您可以使用的文件下方添加修飾符時(shí)。entry-modifier {} and .條目修飾符。entry-title {}

通過這種方法， 將來覆蓋樣式會(huì)更容易。 讓我們看另一個(gè)常見的示例：您具有nav的標(biāo)記。網(wǎng)站導(dǎo)航 > ul。列表菜單 > 。清單項(xiàng)目* 5>一個(gè)（emmet）

現(xiàn)在， 造型 所有你需要的是：

.site-nav {} - component 1

.list-menu {} - component 2
.列表菜單。list-item {}
.list-menu a {}

如果內(nèi)部有更多組件， 像其他下拉菜單一樣， 您可以將它們直接嵌套在里面。列表菜單。 你不用寫網(wǎng)站導(dǎo)航。列表菜單。項(xiàng)目清單。落下{} (4 levels deep) when you can have two levels of .列表菜單。dropdown {}

這是為了可維護(hù)性。 您會(huì)在類似的帖子中找到一個(gè)常見的示例，那就是不要將顏色變量設(shè)置為$ 紅色的， 您可以將其設(shè)置為$ 基本的或$ secondary。

原因是當(dāng)需要更改時(shí)， 變量$ red將輸出藍(lán)色。 您想要更改自己的方式更有意義 primary 顏色， 不是你的 red 顏色， 正確的？

其他類型的顏色和屬性也一樣。 假設(shè)您有一些分隔內(nèi)容的行（例如 小時(shí)> 標(biāo)簽）。 你說的。行破折號(hào)，因?yàn)樗瞧普厶?hào)。 很有道理。 但是，隨之而來的是變化，它必須被點(diǎn)綴。 您是否將其重命名為。點(diǎn)劃線？ 這不是修飾符， 這是組件。 而不是這個(gè) 您可以將其命名為。行分隔符。 然后，如果您想具體一點(diǎn)， 您可以為其添加修飾符。點(diǎn)或。虛線。 這種命名通常是在構(gòu)建網(wǎng)站時(shí)花費(fèi)最多時(shí)間的。

有無數(shù)的好與壞做法。 獲得更好結(jié)果的一種方法是定義規(guī)則并遵循規(guī)則。 很難想出這樣的規(guī)則， 因此，一個(gè)很好的建議是瀏覽網(wǎng)絡(luò)并嘗試收集有關(guān)架構(gòu)的所有可能信息，例如命名約定， 好的做法 如何編寫可維護(hù)的代碼等等。

產(chǎn)生好的代碼需要很多時(shí)間和成千上萬(wàn)行代碼。 在做所有這些的同時(shí)， 總是問自己：“這樣的規(guī)模嗎？”， “我可以重復(fù)使用它嗎？”， “我覆蓋得太多了嗎？”， “這樣命名是否有意義？”。 你做的越多， 您的決策越理想，您的工作速度就會(huì)越快。

在良好的基礎(chǔ)上進(jìn)行投資將減少項(xiàng)目的來回往返，并且將來需要進(jìn)行的任何更改都將更易于實(shí)現(xiàn)。

根據(jù)您的技術(shù)規(guī)范構(gòu)建定制的解決方案。 提交您的提案或請(qǐng)求一個(gè)完整的發(fā)現(xiàn)會(huì)話，以確定您的要求并評(píng)估您的業(yè)務(wù)需求。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學(xué)校教授設(shè)計(jì)。