網(wǎng)站建設關于前端架構設計解決方案之特性之爭與繼承之痛。
網(wǎng)站建設公司認為過去幾年，我們仍然在處理我在前一章中描述的 100％ 動態(tài)標記或 100％ 靜態(tài)標記。不論是哪一種，我們幾乎總是從全局作用域開始開發(fā)，一層一層增加細節(jié)。深圳網(wǎng)站建設公司現(xiàn)在從使用通用樣式開始，比如頁首和段落的標簽，然后給頁面里的各個部分應用具體的樣式：
<body>
<div class="main">
font-size：24px;
color：red;
}
#sidebar h2 {
font-size：20px;
background：red;
color：white;
}
#sidebar .calendar h2 {
background：none;
color：red;
}
</style>
這種方法的問題很多。選擇器優(yōu)先級無論你處理帶 ID 的標簽還是長選擇器，重寫一個選擇器時，總是需要注意它的優(yōu)先級。顏色重置要恢復到原來的 H2 顏色，我們必須再次指定樣式，并且要覆蓋當前的背景顏色。位置依賴現(xiàn)在我們的日歷樣式依賴于側邊欄的樣式。如果將日歷移到頁首或者頁尾，樣式將會改變。多重繼承現(xiàn)在這個 H2 的樣式來源多達三個，這意味著只要改變主體或側邊欄的樣式，都會影響到日歷的呈現(xiàn)。深層嵌套日歷控件里的日歷條目可能還有其他的 H2，而它們也需要一個更具體的選擇器，這樣一來，H2 的樣式來源就增加到了四個。
深圳 網(wǎng)站建設公司資深前端框架工程師還提醒一種現(xiàn)代的、模塊化的方法我們在前面相關 HTML 時就涉及了一些現(xiàn)代模塊化原則，大多數(shù) CSS 框架用它們來解決剛才描述的方案中出現(xiàn)的問題。雖然 OOCSS、SMACSS 和 BEM 對使用什么樣的標記有著不同的觀點，但它們中的每一個都提供了如何寫 CSS 的建議，無論你采取了哪一個方案，這些建議都很有價值。讓我們來快速看一下這些關鍵原則，并且了解它們是如何幫助我們解決前面遇到的問題的。
OOCSS 帶來分離容器和內容的思想，我們學會不再使用位置作為樣式的限定詞。你完全可以在網(wǎng)站上放一個側邊欄，并且給這個側邊欄使用任何你喜歡的樣式，但是，側邊欄的樣式不應該影響側邊欄的內容。#sidebar h2 意味著，放在側邊欄的每一個 H2 元素，要么接受這個樣式，要么就重寫來避免使用這個樣式。而 .my-sidebar-widget-heading 意味著樣式只限定于這一個標題，完全不會影響其他標題。SMACSS 給我們帶來把布局和組件分離到不同文件夾的思想，進一步將側邊欄的角色和日歷模塊劃分開。現(xiàn)在我們只是定義了側邊欄的角色是布局，甚至不允許元素樣式在那部分 Sass 語法的代碼里
float：left;
……
}
.sidebar {
float：right;
……
}
</style>
深圳網(wǎng)站建設公司提醒這就解決了剛才的由于依賴位置而造成 CSS 樣式混亂的問題。選擇器優(yōu)先級把 ID 選擇器改成 CSS 類名選擇器是一個很好的開始，這樣可以停止 CSS 優(yōu)先級之間的沖突問題，讓每一個選擇器的權重扁平化成“1”，我們就不再需要利用優(yōu)先級較量出“勝利者”來決定樣式。顏色重置比降低權重更好的方法是對每一個元素使用唯一的選擇器。這樣你的模塊樣式就不再會與側邊欄樣式或者頁面通用樣式?jīng)_突了。位置依賴去掉布局文件中的樣式代碼之后，我們就不用再擔心因為把日歷組件移出側邊欄而造成樣式改變了。多重繼承每個標題都有了自己唯一的 CSS 類名之后，我們就可以任意修改其中的某個樣式而不會影響其他標題了。如果你想改變多個選擇器對應的樣式，可以使用預處理器變量、混入（mixin）或繼承來幫你做。深層嵌套即使在日歷的層級上，我們也仍然沒有給 H2 標簽應用任何樣式。因此再給日歷中的新 H2 添加樣式時，就不需要重寫通用樣式、側邊欄樣式或者日歷的頭部樣式了。好了，
深圳網(wǎng)站建設公司本文關于“網(wǎng)站建設關于前端架構設計解決方案之特性之爭與繼承之痛”經(jīng)驗就分享到這里，如您有企業(yè)門戶站、電商平臺等網(wǎng)站定制建設項目需要開發(fā)，歡迎聯(lián)系我們在線客服獲取解決方案與報價。謝謝關注，博納網(wǎng)絡編輯整理。
