商業網站CSS結構的提示（或其他相關內容）

CSS和HTML很容易理解。 但是，在構建網站（和應用程序）時，要使它們可重用，將來可維護並使開發人員滿意，就需要學習最佳的架構方法，這需要多年的實踐。

這裡的建築是什麼意思？ 這是CSS代碼的結構。 將其分為文件的方式，類名背後的規則，選擇器的深度，級聯的方式，繼承的內容，如何設置組件，頁面，元素和修飾符。

要將最佳實踐應用於具有數百個頁面，各種類型的內容，屏幕視圖，邊緣情況以及考慮在頂部添加更多內容並修改現有內容的所有這些網站組件，是困難的部分。

使用組件而不是頁面進行構建

這是要考慮的主要部分之一。 您不應該根據您所在的頁面來設置樣式。 不要使用.homepage…{}樣式。 如果您的頁面上有一個部分，請對該部分進行樣式設置。 這樣，您也可以在其他頁面上重複使用它。 如果有按鈕，則將按鈕樣式設置為.button {}，然後在其他地方重用它。 對所有視圖均有效。

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

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

使用修飾符。

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

理想情況下，設計人員應考慮周全，並將變化保持在最低限度，以保持代碼乾淨，但您不必擔心會添加更多代碼。 理想情況下，變體應僅覆蓋一些屬性，並且應使用相同的標記。 這是在HTML階段處理組件的好方法-添加所需的標籤，並使它們在整個站點中保持一致。 不要因為修飾符類而添加新的。

設置兒童組件的樣式。

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

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

在這種情況下，您可以使用.parent .card {}選擇器設置樣式。 您只需要像使用修飾符一樣覆蓋一些屬性即可。 當您執行此操作時，卡本身不會為其樣式增加更多的複雜性，但在特定的邊緣情況下仍然可以正常工作。

考慮這一點時，您還可以看到如何在“每頁”基礎上應用它。 如果設計中存在一些奇怪的情況，並且與標準組件視圖（以及它們全部一起交互的方式）存在一些細微差異，則可以使用.homepage {}選擇器對其進行樣式設置。 請記住要謹慎使用。 根據我們的經驗，此類樣式很少超過幾行代碼。

需要補充的重要注意事項：通常，上下文風格不是一個好習慣。 理想情況下，您甚至不需要它。 在大多數情況下，您將擁有可以很好地完成工作的修飾符。 即使在某些構建中是現實的，但深入使用嚴格的規則編寫好的抽象代碼也可能太昂貴。

分節工作

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

• section.section-container –如果需要，它可以是“組件名稱”，其中包含一致的填充/邊距或任何所需的內容。
• section.section-border-top –是修飾符。 這不使用BEM，但是如果需要，您可以將其“翻譯”為截面容器邊界。
• section.section-welcome –是該部分的名稱。

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

文件分離

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

• 常規-常規通常由設置代碼組成，例如使網格工作，HTML標籤的樣式，重置/規範化器，某些CMS特定的樣式等。
• 頁面–如上所述的頁面樣式。 理想情況下，您應在此處保留很少的代碼。
• 組件–構建的核心–各種組件都位於此處。 一個提示是，您可以擁有“元素”或“雜項”，它們會將較小的組件塊放入一個文件中，而不是80個文件中。 當然，最好將較大的文件放在單獨的文件中。
• 佈局–全局樣式，例如，在“頁眉”，“頁腳”，然後是頁面佈局，網格修改器等上。
• 插件–插件，擴展或任何其他外部生成的東西。 最好將它們分開，然後再在其他項目中重複使用它們。

保持選擇器清潔

乾淨代碼的一個好兆頭就是它看起來多麼簡單。 沒有怪異的屬性，所有事物都有其目的，壓痕低。 不必要時“尋找智能”選擇器不會使您的代碼“酷”。 如果您可以用.rel-something（假設這是一個有意義的類名）替換#container> .row div [rel =” something”]之類的東西，那麼您應該稍微更新一下標記。 這樣做的目的是使一切變得簡單。

保持較低的縮進量。 您很少需要超過三個級別。 讓我們來看一個.entry類：

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

看到實際上沒有必要在.entry中縮進.entry-title。 稍後，當您在文件下添加修飾符時，可以使用.entry-modifier {}和.entry-modifier .entry-title {}

使用這種方法，將來覆蓋樣式會更容易。 讓我們看另一個常見的示例：您具有nav.site-nav> ul.list-menu> li.list-items * 5> a（emmet）的標記

現在，要進行樣式設置，您所需要做的就是：

.site-nav {}-組件1

.list-menu {}-組件2
.list-menu .list-item {}
.list-menu a {}

如果內部有更多組件，例如其他下拉列表，則可以將它們直接嵌套在.list-menu中。 當您可以具有兩個級別的.list-menu .dropdown {}時，無需編寫.site-nav .list-menu .list-item .dropdown {}

為修飾符寫更多的抽像類名

這是為了可維護性。 您會在類似的帖子中找到一個常見的示例，而不是將顏色變量設置為$ red，而是將其設置為$ primary或​​$ secondary。

原因是當需要進行更改時，變量$ red將輸出藍色。 您想更改原色而不是紅色更有意義，對嗎？

其他類型的顏色和屬性也一樣。 假設您有分隔某些內容的行（例如<hr>標記）。 您將其命名為.line-dash，因為它是虛線。 很有道理。 但是，隨之而來的是變化，它必須被點綴。 您是否將其重命名為.line-dotted？ 這不是修飾符，這是組件。 代替此，您可以將其命名為.line-separator。 然後，如果要具體化，可以為.dotted或.dashed添加修飾符。 這種命名通常是在構建網站時花費最多的時間。

綜上所述

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

產生好的代碼需要很多時間和成千上萬行代碼。 在執行所有這些操作時，請始終問自己“該秤是否可以使用？”，“我可以重複使用它嗎？”，“我覆蓋得太多了嗎？”，“這樣命名是否有意義？”。 您做得越多，您的決策就越優化，您的工作速度就會提高。

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