css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起來是一種非常直接且不易犯錯的語言。只需要添加規則以對網站進行樣式設置就可以了，對嗎？對于只需要幾個 CSS 文件的小型站點，可能是這種情況。但是在大型程序中，這樣可能會使樣式迅速失控。如何讓它們更可控？
事實是，就像其他任何語言一樣，CSS的細微差別可以使你的設計有天壤之別。這是 CSS 的 10 條技巧 —— 可以幫助你從樣式中獲得最大收益的最佳實踐。
1. 你真的需要框架嗎？
首先，確定你是否真的需要使用 CSS 框架。現在有許多輕量級的方法可以替代繁重的框架。通常，你不會使用框架中的每個選擇器，因此你的程序中會包含冗余代碼。
如果你只需要使用按鈕的樣式，將它們復制到你自己的 CSS 文件中，然后刪除其余的樣式。另外，你可以使用開發者工具中的代碼覆蓋率檢測來識別未使用的 CSS 規則。
要打開它，請在“工具”面板中搜索 Coverage。您可以通過單擊 Ctrl + Shift + P 來打開工具面板。打開后，單擊重新加載圖標開始錄制。所有顯示紅色的內容都是沒有使用的。
你可以在上面的例子中看到，它表示了 98% 的 CSS 都沒有被使用。請注意，實際上并非如此 —— 某些 CSS 樣式僅在用戶與網站互動后才應用。移動設備的樣式也會被標記為未使用。因此，在刪除所有內容之前，請確保這些樣式確實沒有在任何地方使用。
2. 選用一套 CSS 規范
考慮為你的項目使用一套 CSS 規范。CSS 規范使 CSS 文件具有一致性。它們有助于擴展和維護您的項目。這里有一些我推薦的 CSS 規范。
BEM
BEM —— Block(塊)、Element(元素)、Modifier(修飾符)—— 是最流行的 CSS 規范之一。它是一組命名約定，你可以使用它們輕松地設計可復用組件。命名約定遵循以下模式：
.block?{?...?}.block__element?{?...?}
.block--modifier?{?...?}
- .block：塊代表一個組件。它們是獨立的實體，并且對自身有意義。
- .block__element：這些是 .block 的一部分。它們沒有獨立的含義，必須綁定到一個塊上。
- .block--modifier：它們被用作塊或元素的標志。我們可以使用它們來改變元素的外觀、行為或狀態。例如，要使用隱藏標記，我們可以命名為 .block--hidden。
ITCSS
倒三角 CSS 通過引入不同的層來實現不同的特性，幫助你更好地組織你的文件。你走得越深，就越具體。
OOCSS
Object-oriented CSS 或 OOCSS 遵循兩個主要的原則。
「分離結構和視覺效果」
這意味著你要將視覺效果與結構代碼分開定義。這在實踐中意味著什么？
/*?待優化的內容??*/.box?{
????width:?250px;
????height:?250px;
????padding:?10px;
????border:?1px?solid?#CCC;
????box-shadow:?1px?2px?5px?#CCC;
????border-radius:?5px;
}
/*?優化后?*/
.box?{
????width:?250px;
????height:?250px;
????padding:?10px;
}
.elevated?{
????border:?1px?solid?#CCC;
????box-shadow:?1px?2px?5px?#CCC;
????border-radius:?5px;
}
「分隔容器和內容」
這意味著你不希望任何元素依賴于它的位置。相同的元素無論在頁面的什么位置看起來都應該是相同的。
/*?待優化的內容?*/.main?span.breadcumb?{?...?}
/*?優化后?*/
.breadcrumb?{?...?}
3. 設置預處理器
設置預處理器可以在很多方面給你帶來好處。預處理器是一種工具，它允許你使用 CSS 中不存在的高級特性。這些特性可能是循環變量甚至函數之類的東西。
現在有很多預處理器。最著名的三個大概是 Sass、Less 和 Stylus。我建議使用 Sass，因為它有一個成熟的社區，而且你可以在網上找到大量關于它的文檔。
那么，預處理器能提供什么幫助？
更好地組織樣式
預處理可以幫你更好地組織樣式。它們能夠將你的文件拆解成更小的可復用文件。它們可以相互導入，或者分別導入你的應用。
// 為一個 SCSS 文件導入不同的模塊@import 'settings';
@import 'tools';
@import 'generic';
@import 'elements';
@import 'objects';
@import 'components';
@import 'trumps';
嵌套選擇器
另一種增強可讀性的好方法是嵌套選擇器。這是一個簡單而強大但 CSS 所缺少的功能。
.wrapper {.sidebar {
&.collapsed {
display: none;
}
.list {
.list-item {
...
&.list-item--active {
...
}
}
}
}
}
分層結構使我們更加清晰的看出不同元素的結合關系。
自動為你的規則添加前綴
CSS 中有一些非標準或實驗性功能的前綴。不同的瀏覽器為其使用不同的前綴，例如：
- -webkit-：適用于基于 WebKit 的瀏覽器，例如 Chrome、Safari 或 Opera 的較新版本。
- -moz-：適用于 Firefox。
- -o-：適用于舊版 Opera。
- -ms-：用于 IE 和 Edge。
為了支持所有主流瀏覽器，我們必須多次定義某些屬性。
.gradient?{????background:?rgb(30,87,153);
????background:?-moz-linear-gradient(top,?rgba(30,87,153,1)?0%,?rgba(41,137,216,1)?50%,?rgba(32,124,202,1)?51%,?rgba(125,185,232,1)?100%);
????background:?-webkit-linear-gradient(top,?rgba(30,87,153,1)?0%,?rgba(41,137,216,1)?50%,?rgba(32,124,202,1)?51%,?rgba(125,185,232,1)?100%);
????background:?linear-gradient(to?bottom,?rgba(30,87,153,1)?0%,?rgba(41,137,216,1)?50%,?rgba(32,124,202,1)?51%,?rgba(125,185,232,1)?100%);
????filter:?progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',?endColorstr='#7db9e8',?GradientType=0);
}
預處理器可以解決此問題，它借助了 mixin —— 可以代替硬編碼值使用的函數。
@mixin gradient() {background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}
.gradient {
@include gradient();
}
在需要的時候添加 mixin 可以避免編寫冗余代碼。
使用后處理器
更好的選擇是后處理器。一旦 CSS 由預處理器生成，則后處理器可以運行其他優化步驟。最受歡迎的后處理器之一是 [PostCSS](https://postcss.org/)。
你可以使用 PostCSS 來自動為 CSS 規則添加前綴，就必擔心會遺漏主要的瀏覽器。他們使用 Can I Use 中的值，因此它始終保持最新的。
另一個很好的后處理器是 [autoprefixer](https://www.npmjs.com/package/autoprefixer)。使用 autoprefixer，當您要支持最新四個版本時 — 無需在CSS文件中寫入任何前綴就可以完成所有工作！
const?autoprefixer?=?require('autoprefixer')({????browsers:?[
?'last?4?versions',
?'not?ie?
????]
});
使用配置進行一致的設計
除了 mixin，你還可以選擇使用變量。與 linter 一起，你可以強制執行自己的設計規則。
// 字體定義$font-12: 12px;
$font-21: 21px;
// 顏色定義
$color-white: #FAFAFA;
$color-black: #212121;
4. 使用標簽代替 CSS
現在讓我們進入實際的 CSS 應用。這經常被忽略。通常，你可以簡單地通過使用正確的 HTML 標簽來減小 CSS 包的大小。假設你的標題包含以下規則：
span.heading?{????display:?block;
????font-size:?1.2em;
????margin-top:?1em;
????margin-bottom:?1em;?
}
你使用了一個 span 標簽作為標題。你重寫了默認的顯示、間距和字體樣式。這可以通過使用 h1、h2 或 h3 來避免。默認情況下，它們具有你試圖用其他標簽達到的樣式。你可以立即少寫四條不必要的樣式規則。
5. 使用簡寫屬性
為了進一步減少樣式規則數量，通常使用 簡寫屬性。對于上面的示例，我們可以寫：
.heading?{????margin:?1em?0;
}
對于其他屬性，如邊框、邊框或背景，也是如此。
6. 減少冗余
這與上一點是密切相關的。有時很難發現冗余，特別是當兩個選擇器中的重復規則未遵循相同順序時。但是，如果你的類僅在一個或兩個規則中有所不同，最好將這些規則外包出去，作為一個額外的類使用。這是優化前的代碼：
<style>.warning?{width:?100%;height:?50px;background:?yellow;border-radius:?5px;????}.elevated-warning?{width:?100%;height:?50px;font-size:?150%;background:?yellow;box-shadow:?1px?2px?5px?#CCC;border-radius:?5px;
????}style>
<div?class="warning">??div>
<div?class="elevated-warning">?div>
試著用類似的方法：
<style>.warning?{width:?100%;height:?50px;background:?yellow;border-radius:?5px;????}.warning--elevated?{font-size:?150%;box-shadow:?1px?2px?5px?#CCC;
????}style>
<div?class="warning">??div>
<div?class="warning?warning--elevated">?div>
7. 避免使用復雜的選擇器
使用復雜的選擇器有兩個主要問題。首先，增加的特性不僅會使以后重寫現有規則變得更加困難，還會增加瀏覽器匹配選擇器所需的時間。
匹配選擇器
當瀏覽器解析選擇器并確定它與哪個元素匹配時，它們是從右到左進行的。就性能而言，這比相反的方式更快。讓我們以下面的選擇器為例。
.deeply?.nested?.selector?span?{????...
}
瀏覽器將首先從 span 開始。它將匹配所有 span 標簽，然后轉到下一個匹配項。它將過濾掉 .selector 類中的 span，以此類推。
不建議使用 CSS 的標簽選擇器，因為它會匹配所有的標簽。雖然只有幾分之一毫秒的差異，但積少成多。另一個更重要的原因是，減少選擇器復雜性是一種好習慣。
理解選擇器
不僅機器很難進行解析，人類也難以理解。以如下為例：
[type="checkbox"]:checked?+?[class$="-confirmation"]::after?{????...
}
你認為上述規則什么時候適用？通過創建自定義類并使用 JavaScript 進行切換，可以簡化此過程。
.confirmation-icon::after?{????...
}
現在看起來舒服多了。如果你發現自己仍然需要過于復雜的選擇器，而且你相信沒有其他選擇，請在下面留下你的評論解釋你的解決方案。
/**?*?選中復選框后創建確認圖標。
?*?選擇所有以類名“-confirmation”結尾的標簽
?*?前面有一個選中的復選框。
?* PS.：沒有其他方法可以解決此問題，請不要嘗試修復它。
?**/
.checkbox:checked?+?label[class$="-confirmation"]::after?{
????...
}
8. 不要刪除輪廓
這是開發人員在編寫 CSS 時最常犯的錯誤之一。雖然你可能認為刪除輪廓創建的高亮沒有什么錯，但事實上，你正在使網站無法訪問。通常將此規則添加為 CSS 的重置值。
:focus?{????outline:?none;
}
然而，這樣的話，那些只能用鍵盤導航的用戶將對網站聚焦的地方和內容一無所知。
如果默認樣式對你的品牌不利，請創建自定義輪廓。只要確保在聚焦元素方面有某種指示即可。
9. 以移動設備優先
當你必須處理媒體查詢時，請始終使用移動設備優先。以移動設備為先的方法意味著當你開始編寫 CSS 時，需要以小屏幕開發為基礎，然后再擴展到其他設備。這也稱為漸進增強。
這將確保你主要添加額外的規則來迎合大屏幕設備，而不是重寫現有的 CSS 規則。這樣可以減少最終使用的規則數量。
您如何判斷是否使用移動優先？如果你的媒體查詢使用 min-width，你就在正確的軌道上。
/*?移動優先的媒體查詢，所有?600px?以上的設備都會獲得以下樣式?*/@media?(min-width:?600px)?{
????/*?你的CSS規則?*/
}
/*?非移動優先媒體查詢，所有?600px?以下的設備都會獲得以下樣式?*/
@media?(max-width:?600px)?{
????/*?你的CSS規則?*/
}
10. 壓縮
最后，壓縮文件包以減少它們的大小。因為壓縮過程刪除了注釋和空白字符，所以文件包只需更少的寬帶就能獲取。
如果還沒有，也可以在服務器端啟用壓縮。
進一步減小 CSS —— 「和標記」 —— 大小的另一種好方法是混淆類名。
為此，你可以根據項目設置選擇幾個選項：
- 「Webpack」：對于 Webpack，可以使用 [css-loader](https://github.com/webpack-contrib/css-loader) 模塊。
- 「Gulp」: 對于 Gulp，可以使用 [gulp-minify-cssnames](https://www.npmjs.com/package/gulp-minify-cssnames) 插件。
- 「自定義」: 如果你沒有用于項目設置的專用軟件包，那么我會提供一個教程，向你展示如何創建 自己的實現.
總結
遵循以上 10 個簡單步驟將有助于你編寫有以下優點的 css 文件：
- 更輕巧
- 易于維護
- 易于擴展
不僅如此，使用一些實用工具，如預定義的調色板或排版規則，將幫助您創建更穩定的設計。你的樣式復用性也將更高，你就可以為下一個項目節省時間。
還有哪些未在本文提及，而你遵循的 CSS 最佳實踐呢？在評論中告訴我們！
感謝你花時間閱讀本文，祝你愉快！
?如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改并 PR，也可獲得相應獎勵積分。文章開頭的 「本文永久鏈接」 即為本文在 GitHub 上的 MarkDown 鏈接。
??
掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、后端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。
?總結
以上是生活随笔為你收集整理的css 倒三角_【译】改善 CSS 的 10 个最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小平米客厅可以铺木地板吗？大理石和木地板
- 下一篇： html中函数的意义,理解函数式 CSS