css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起來(lái)是一種非常直接且不易犯錯(cuò)的語(yǔ)言。只需要添加規(guī)則以對(duì)網(wǎng)站進(jìn)行樣式設(shè)置就可以了,對(duì)嗎?對(duì)于只需要幾個(gè) CSS 文件的小型站點(diǎn),可能是這種情況。但是在大型程序中,這樣可能會(huì)使樣式迅速失控。如何讓它們更可控?
事實(shí)是,就像其他任何語(yǔ)言一樣,CSS的細(xì)微差別可以使你的設(shè)計(jì)有天壤之別。這是 CSS 的 10 條技巧 —— 可以幫助你從樣式中獲得最大收益的最佳實(shí)踐。
1. 你真的需要框架嗎?
首先,確定你是否真的需要使用 CSS 框架。現(xiàn)在有許多輕量級(jí)的方法可以替代繁重的框架。通常,你不會(huì)使用框架中的每個(gè)選擇器,因此你的程序中會(huì)包含冗余代碼。
如果你只需要使用按鈕的樣式,將它們復(fù)制到你自己的 CSS 文件中,然后刪除其余的樣式。另外,你可以使用開發(fā)者工具中的代碼覆蓋率檢測(cè)來(lái)識(shí)別未使用的 CSS 規(guī)則。
要打開它,請(qǐng)?jiān)凇肮ぞ摺泵姘逯兴阉?Coverage。您可以通過(guò)單擊 Ctrl + Shift + P 來(lái)打開工具面板。打開后,單擊重新加載圖標(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)志。我們可以使用它們來(lái)改變?cè)氐耐庥^、行為或狀態(tài)。例如,要使用隱藏標(biāo)記,我們可以命名為 .block--hidden。
ITCSS
倒三角 CSS 通過(guò)引入不同的層來(lái)實(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è)面的什么位置看起來(lái)都應(yīng)該是相同的。
/*?待優(yōu)化的內(nèi)容?*/.main?span.breadcumb?{?...?}
/*?優(yōu)化后?*/
.breadcrumb?{?...?}
3. 設(shè)置預(yù)處理器
設(shè)置預(yù)處理器可以在很多方面給你帶來(lái)好處。預(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ù)處理器可以解決此問(wèn)題,它借助了 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 來(lái)自動(dòng)為 CSS 規(guī)則添加前綴,就必?fù)?dān)心會(huì)遺漏主要的瀏覽器。他們使用 Can I Use 中的值,因此它始終保持最新的。
另一個(gè)很好的后處理器是 [autoprefixer](https://www.npmjs.com/package/autoprefixer)。使用 autoprefixer,當(dāng)您要支持最新四個(gè)版本時(shí) — 無(wú)需在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)單地通過(guò)使用正確的 HTML 標(biāo)簽來(lái)減小 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)的顯示、間距和字體樣式。這可以通過(guò)使用 h1、h2 或 h3 來(lái)避免。默認(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è)主要問(wèn)題。首先,增加的特性不僅會(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)。它將過(guò)濾掉 .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í)候適用?通過(guò)創(chuàng)建自定義類并使用 JavaScript 進(jìn)行切換,可以簡(jiǎn)化此過(guò)程。
.confirmation-icon::after?{????...
}
現(xiàn)在看起來(lái)舒服多了。如果你發(fā)現(xiàn)自己仍然需要過(guò)于復(fù)雜的選擇器,而且你相信沒有其他選擇,請(qǐng)?jiān)谙旅媪粝履愕脑u(píng)論解釋你的解決方案。
/**?*?選中復(fù)選框后創(chuàng)建確認(rèn)圖標(biāo)。
?*?選擇所有以類名“-confirmation”結(jié)尾的標(biāo)簽
?*?前面有一個(gè)選中的復(fù)選框。
?* PS.:沒有其他方法可以解決此問(wèn)題,請(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)站無(wú)法訪問(wèn)。通常將此規(guī)則添加為 CSS 的重置值。
:focus?{????outline:?none;
}
然而,這樣的話,那些只能用鍵盤導(dǎo)航的用戶將對(duì)網(wǎng)站聚焦的地方和內(nèi)容一無(wú)所知。
如果默認(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ī)則來(lái)迎合大屏幕設(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過(guò)程刪除了注釋和空白字符,所以文件包只需更少的寬帶就能獲取。
如果還沒有,也可以在服務(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ū),文章來(lái)源為 掘金 上的英文分享文章。內(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èn)題。
- 上一篇: 小平米客厅可以铺木地板吗?大理石和木地板
- 下一篇: 请问坤耐的聚酯纤维吸音板是环保的吗?