CSS 看起來是一種非常直接且不易犯錯(cuò)的語言。只需要添加規(guī)則以對(duì)網(wǎng)站進(jìn)行樣式設(shè)置就可以了，對(duì)嗎？對(duì)于只需要幾個(gè) CSS 文件的小型站點(diǎn)，可能是這種情況。但是在大型程序中，這樣可能會(huì)使樣式迅速失控。如何讓它們更可控？

事實(shí)是，就像其他任何語言一樣，CSS的細(xì)微差別可以使你的設(shè)計(jì)有天壤之別。這是 CSS 的 10 條技巧 —— 可以幫助你從樣式中獲得最大收益的最佳實(shí)踐。

1. 你真的需要框架嗎？

首先，確定你是否真的需要使用 CSS 框架。現(xiàn)在有許多輕量級(jí)的方法可以替代繁重的框架。通常，你不會(huì)使用框架中的每個(gè)選擇器，因此你的程序中會(huì)包含冗余代碼。

如果你只需要使用按鈕的樣式，將它們復(fù)制到你自己的 CSS 文件中，然后刪除其余的樣式。另外，你可以使用開發(fā)者工具中的代碼覆蓋率檢測(cè)來識(shí)別未使用的 CSS 規(guī)則。

要打開它，請(qǐng)?jiān)凇肮ぞ摺泵姘逯兴阉?Coverage。您可以通過單擊 Ctrl + Shift + P 來打開工具面板。打開后，單擊重新加載圖標(biāo)開始錄制。所有顯示紅色的內(nèi)容都是沒有使用的。

你可以在上面的例子中看到，它表示了 98% 的 CSS 都沒有被使用。請(qǐng)注意，實(shí)際上并非如此 —— 某些 CSS 樣式僅在用戶與網(wǎng)站互動(dòng)后才應(yīng)用。移動(dòng)設(shè)備的樣式也會(huì)被標(biāo)記為未使用。因此，在刪除所有內(nèi)容之前，請(qǐng)確保這些樣式確實(shí)沒有在任何地方使用。

2. 選用一套 CSS 規(guī)范

考慮為你的項(xiàng)目使用一套 CSS 規(guī)范。CSS 規(guī)范使 CSS 文件具有一致性。它們有助于擴(kuò)展和維護(hù)您的項(xiàng)目。這里有一些我推薦的 CSS 規(guī)范。

BEM

BEM —— Block(塊)、Element(元素)、Modifier(修飾符)—— 是最流行的 CSS 規(guī)范之一。它是一組命名約定，你可以使用它們輕松地設(shè)計(jì)可復(fù)用組件。命名約定遵循以下模式：

.block?{?...?}
.block__element?{?...?}
.block--modifier?{?...?}

• .block：塊代表一個(gè)組件。它們是獨(dú)立的實(shí)體，并且對(duì)自身有意義。
• .block__element：這些是 .block 的一部分。它們沒有獨(dú)立的含義，必須綁定到一個(gè)塊上。
• .block--modifier：它們被用作塊或元素的標(biāo)志。我們可以使用它們來改變?cè)氐耐庥^、行為或狀態(tài)。例如，要使用隱藏標(biāo)記，我們可以命名為 .block--hidden。

ITCSS

倒三角 CSS 通過引入不同的層來實(shí)現(xiàn)不同的特性，幫助你更好地組織你的文件。你走得越深，就越具體。

OOCSS

Object-oriented CSS 或 OOCSS 遵循兩個(gè)主要的原則。

「分離結(jié)構(gòu)和視覺效果」

這意味著你要將視覺效果與結(jié)構(gòu)代碼分開定義。這在實(shí)踐中意味著什么？

/*?待優(yōu)化的內(nèi)容??*/
.box?{
????width:?250px;
????height:?250px;
????padding:?10px;
????border:?1px?solid?#CCC;
????box-shadow:?1px?2px?5px?#CCC;
????border-radius:?5px;
}

/*?優(yōu)化后?*/
.box?{
????width:?250px;
????height:?250px;
????padding:?10px;
}

.elevated?{
????border:?1px?solid?#CCC;
????box-shadow:?1px?2px?5px?#CCC;
????border-radius:?5px;
}

「分隔容器和內(nèi)容」

這意味著你不希望任何元素依賴于它的位置。相同的元素?zé)o論在頁面的什么位置看起來都應(yīng)該是相同的。

/*?待優(yōu)化的內(nèi)容?*/
.main?span.breadcumb?{?...?}

/*?優(yōu)化后?*/
.breadcrumb?{?...?}

3. 設(shè)置預(yù)處理器

設(shè)置預(yù)處理器可以在很多方面給你帶來好處。預(yù)處理器是一種工具，它允許你使用 CSS 中不存在的高級(jí)特性。這些特性可能是循環(huán)變量甚至函數(shù)之類的東西。

現(xiàn)在有很多預(yù)處理器。最著名的三個(gè)大概是 Sass、Less 和 Stylus。我建議使用 Sass，因?yàn)樗幸粋€(gè)成熟的社區(qū)，而且你可以在網(wǎng)上找到大量關(guān)于它的文檔。

那么，預(yù)處理器能提供什么幫助？

更好地組織樣式

預(yù)處理可以幫你更好地組織樣式。它們能夠?qū)⒛愕奈募鸾獬筛〉目蓮?fù)用文件。它們可以相互導(dǎo)入，或者分別導(dǎo)入你的應(yīng)用。

// 為一個(gè) SCSS 文件導(dǎo)入不同的模塊
@import 'settings';
@import 'tools';
@import 'generic';
@import 'elements';
@import 'objects';
@import 'components';
@import 'trumps';

嵌套選擇器

另一種增強(qiáng)可讀性的好方法是嵌套選擇器。這是一個(gè)簡(jiǎn)單而強(qiáng)大但 CSS 所缺少的功能。

.wrapper {
.sidebar {
&.collapsed {
display: none;
}

.list {
.list-item {
...

&.list-item--active {
...
}
}
}
}
}

分層結(jié)構(gòu)使我們更加清晰的看出不同元素的結(jié)合關(guān)系。

自動(dòng)為你的規(guī)則添加前綴

CSS 中有一些非標(biāo)準(zhǔn)或?qū)嶒?yàn)性功能的前綴。不同的瀏覽器為其使用不同的前綴，例如：

• -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);
}

預(yù)處理器可以解決此問題，它借助了 mixin —— 可以代替硬編碼值使用的函數(shù)。

@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();
}

在需要的時(shí)候添加 mixin 可以避免編寫冗余代碼。

使用后處理器

更好的選擇是后處理器。一旦 CSS 由預(yù)處理器生成，則后處理器可以運(yùn)行其他優(yōu)化步驟。最受歡迎的后處理器之一是 [PostCSS](https://postcss.org/)。

你可以使用 PostCSS 來自動(dòng)為 CSS 規(guī)則添加前綴，就必?fù)?dān)心會(huì)遺漏主要的瀏覽器。他們使用 Can I Use 中的值，因此它始終保持最新的。

另一個(gè)很好的后處理器是 [autoprefixer](https://www.npmjs.com/package/autoprefixer)。使用 autoprefixer，當(dāng)您要支持最新四個(gè)版本時(shí) — 無需在CSS文件中寫入任何前綴就可以完成所有工作！

const?autoprefixer?=?require('autoprefixer')({
????browsers:?[
?'last?4?versions',
?'not?ie?
????]
});

使用配置進(jìn)行一致的設(shè)計(jì)

除了 mixin，你還可以選擇使用變量。與 linter 一起，你可以強(qiáng)制執(zhí)行自己的設(shè)計(jì)規(guī)則。

// 字體定義
$font-12: 12px;
$font-21: 21px;

// 顏色定義
$color-white: #FAFAFA;
$color-black: #212121;

4. 使用標(biāo)簽代替 CSS

現(xiàn)在讓我們進(jìn)入實(shí)際的 CSS 應(yīng)用。這經(jīng)常被忽略。通常，你可以簡(jiǎn)單地通過使用正確的 HTML 標(biāo)簽來減小 CSS 包的大小。假設(shè)你的標(biāo)題包含以下規(guī)則：

span.heading?{
????display:?block;
????font-size:?1.2em;
????margin-top:?1em;
????margin-bottom:?1em;?
}

你使用了一個(gè) span 標(biāo)簽作為標(biāo)題。你重寫了默認(rèn)的顯示、間距和字體樣式。這可以通過使用 h1、h2 或 h3 來避免。默認(rèn)情況下，它們具有你試圖用其他標(biāo)簽達(dá)到的樣式。你可以立即少寫四條不必要的樣式規(guī)則。

5. 使用簡(jiǎn)寫屬性

為了進(jìn)一步減少樣式規(guī)則數(shù)量，通常使用 簡(jiǎn)寫屬性。對(duì)于上面的示例，我們可以寫：

.heading?{
????margin:?1em?0;
}

對(duì)于其他屬性，如邊框、邊框或背景，也是如此。

6. 減少冗余

這與上一點(diǎn)是密切相關(guān)的。有時(shí)很難發(fā)現(xiàn)冗余，特別是當(dāng)兩個(gè)選擇器中的重復(fù)規(guī)則未遵循相同順序時(shí)。但是，如果你的類僅在一個(gè)或兩個(gè)規(guī)則中有所不同，最好將這些規(guī)則外包出去，作為一個(gè)額外的類使用。這是優(yōu)化前的代碼：

<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. 避免使用復(fù)雜的選擇器

使用復(fù)雜的選擇器有兩個(gè)主要問題。首先，增加的特性不僅會(huì)使以后重寫現(xiàn)有規(guī)則變得更加困難，還會(huì)增加瀏覽器匹配選擇器所需的時(shí)間。

匹配選擇器

當(dāng)瀏覽器解析選擇器并確定它與哪個(gè)元素匹配時(shí)，它們是從右到左進(jìn)行的。就性能而言，這比相反的方式更快。讓我們以下面的選擇器為例。

.deeply?.nested?.selector?span?{
????...
}

瀏覽器將首先從 span 開始。它將匹配所有 span 標(biāo)簽，然后轉(zhuǎn)到下一個(gè)匹配項(xiàng)。它將過濾掉 .selector 類中的 span，以此類推。

不建議使用 CSS 的標(biāo)簽選擇器，因?yàn)樗鼤?huì)匹配所有的標(biāo)簽。雖然只有幾分之一毫秒的差異，但積少成多。另一個(gè)更重要的原因是，減少選擇器復(fù)雜性是一種好習(xí)慣。

理解選擇器

不僅機(jī)器很難進(jìn)行解析，人類也難以理解。以如下為例：

[type="checkbox"]:checked?+?[class$="-confirmation"]::after?{
????...
}

你認(rèn)為上述規(guī)則什么時(shí)候適用？通過創(chuàng)建自定義類并使用 JavaScript 進(jìn)行切換，可以簡(jiǎn)化此過程。

.confirmation-icon::after?{
????...
}

現(xiàn)在看起來舒服多了。如果你發(fā)現(xiàn)自己仍然需要過于復(fù)雜的選擇器，而且你相信沒有其他選擇，請(qǐng)?jiān)谙旅媪粝履愕脑u(píng)論解釋你的解決方案。

/**
?*?選中復(fù)選框后創(chuàng)建確認(rèn)圖標(biāo)。
?*?選擇所有以類名“-confirmation”結(jié)尾的標(biāo)簽
?*?前面有一個(gè)選中的復(fù)選框。
?* PS.：沒有其他方法可以解決此問題，請(qǐng)不要嘗試修復(fù)它。
?**/
.checkbox:checked?+?label[class$="-confirmation"]::after?{
????...
}

8. 不要?jiǎng)h除輪廓

這是開發(fā)人員在編寫 CSS 時(shí)最常犯的錯(cuò)誤之一。雖然你可能認(rèn)為刪除輪廓?jiǎng)?chuàng)建的高亮沒有什么錯(cuò)，但事實(shí)上，你正在使網(wǎng)站無法訪問。通常將此規(guī)則添加為 CSS 的重置值。

:focus?{
????outline:?none;
}

然而，這樣的話，那些只能用鍵盤導(dǎo)航的用戶將對(duì)網(wǎng)站聚焦的地方和內(nèi)容一無所知。

如果默認(rèn)樣式對(duì)你的品牌不利，請(qǐng)創(chuàng)建自定義輪廓。只要確保在聚焦元素方面有某種指示即可。

9. 以移動(dòng)設(shè)備優(yōu)先

當(dāng)你必須處理媒體查詢時(shí)，請(qǐng)始終使用移動(dòng)設(shè)備優(yōu)先。以移動(dòng)設(shè)備為先的方法意味著當(dāng)你開始編寫 CSS 時(shí)，需要以小屏幕開發(fā)為基礎(chǔ)，然后再擴(kuò)展到其他設(shè)備。這也稱為漸進(jìn)增強(qiáng)。

這將確保你主要添加額外的規(guī)則來迎合大屏幕設(shè)備，而不是重寫現(xiàn)有的 CSS 規(guī)則。這樣可以減少最終使用的規(guī)則數(shù)量。

您如何判斷是否使用移動(dòng)優(yōu)先？如果你的媒體查詢使用 min-width，你就在正確的軌道上。

/*?移動(dòng)優(yōu)先的媒體查詢，所有?600px?以上的設(shè)備都會(huì)獲得以下樣式?*/
@media?(min-width:?600px)?{
????/*?你的CSS規(guī)則?*/
}

/*?非移動(dòng)優(yōu)先媒體查詢，所有?600px?以下的設(shè)備都會(huì)獲得以下樣式?*/
@media?(max-width:?600px)?{
????/*?你的CSS規(guī)則?*/
}

10. 壓縮

最后，壓縮文件包以減少它們的大小。因?yàn)閴嚎s過程刪除了注釋和空白字符，所以文件包只需更少的寬帶就能獲取。

如果還沒有，也可以在服務(wù)器端啟用壓縮。

進(jìn)一步減小 CSS —— 「和標(biāo)記」 —— 大小的另一種好方法是混淆類名。

為此，你可以根據(jù)項(xiàng)目設(shè)置選擇幾個(gè)選項(xiàng)：

• 「Webpack」：對(duì)于 Webpack，可以使用 [css-loader](https://github.com/webpack-contrib/css-loader) 模塊。
• 「Gulp」: 對(duì)于 Gulp，可以使用 [gulp-minify-cssnames](https://www.npmjs.com/package/gulp-minify-cssnames) 插件。
• 「自定義」: 如果你沒有用于項(xiàng)目設(shè)置的專用軟件包，那么我會(huì)提供一個(gè)教程，向你展示如何創(chuàng)建 自己的實(shí)現(xiàn).

總結(jié)

遵循以上 10 個(gè)簡(jiǎn)單步驟將有助于你編寫有以下優(yōu)點(diǎn)的 css 文件：

• 更輕巧
• 易于維護(hù)
• 易于擴(kuò)展

不僅如此，使用一些實(shí)用工具，如預(yù)定義的調(diào)色板或排版規(guī)則，將幫助您創(chuàng)建更穩(wěn)定的設(shè)計(jì)。你的樣式復(fù)用性也將更高，你就可以為下一個(gè)項(xiàng)目節(jié)省時(shí)間。

還有哪些未在本文提及，而你遵循的 CSS 最佳實(shí)踐呢？在評(píng)論中告訴我們！

感謝你花時(shí)間閱讀本文，祝你愉快！

?

如果發(fā)現(xiàn)譯文存在錯(cuò)誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對(duì)譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎(jiǎng)勵(lì)積分。文章開頭的 「本文永久鏈接」 即為本文在 GitHub 上的 MarkDown 鏈接。

?

---

?

掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計(jì)、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請(qǐng)持續(xù)關(guān)注 掘金翻譯計(jì)劃、官方微博、知乎專欄。

?

總結(jié)

以上是生活随笔為你收集整理的css 倒三角_【译】改善 CSS 的 10 个最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。