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

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

要將最佳做法應用于包含數百頁的所有這些網站組件， 各種內容， 屏幕瀏覽量 邊緣情況， 考慮添加更多內容并修改現有內容是困難的部分。

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

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

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

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

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

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

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

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

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

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

大多數商業網站（以及與此相關的許多其他網站）都將內容分為幾個部分。 每個部分都是一個帶有修飾符類的組件，該修飾符類定義了各種屬性。 關于類的結構的一種建議是：

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

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

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

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

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

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

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

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

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

現在， 造型 所有你需要的是：

.site-nav {} - component 1

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

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

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

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

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

有無數的好與壞做法。 獲得更好結果的一種方法是定義規則并遵循規則。 很難想出這樣的規則， 因此，一個很好的建議是瀏覽網絡并嘗試收集有關架構的所有可能信息，例如命名約定， 好的做法 如何編寫可維護的代碼等等。

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

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

根據您的技術規范構建定制的解決方案。 提交您的提案或請求一個完整的發現會話，以確定您的要求并評估您的業務需求。

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