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

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

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

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

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

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

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

理想情況下， 設(shè)計人員應(yīng)考慮周全，并盡量減少變化以保持代碼干凈， 但您不必擔心會添加更多內(nèi)容。 理想情況下，變體應(yīng)該只覆蓋一些屬性，并且應(yīng)該使用相同的標記。 這是在HTML階段使用組件的好方法-添加所需的標簽，并使它們在整個網(wǎng)站中保持一致。 不要因為修飾符類而添加新的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.site-nav {} - component 1

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

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

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

原因是當需要更改時， 變量$ red將輸出藍色。 您想要更改自己的方式更有意義 primary 顏色， 不是你的 red 顏色， 正確的？

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

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

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

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

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

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