改善CSS的10種優(yōu)秀做法
CSS可能看起來(lái)是一門相當(dāng)簡(jiǎn)單的語(yǔ)言，在這門語(yǔ)言上很難出錯(cuò)。你只需添加你的規(guī)則來(lái)設(shè)計(jì)你的網(wǎng)站就完成了，對(duì)于只需要幾個(gè)CSS文件的小型站點(diǎn)，可能是這樣的。但在大型應(yīng)用程序中，樣式可能會(huì)迅速失控。你如何讓他們處于可控狀態(tài)?
事實(shí)是，就像其他任何語(yǔ)言一樣，CSS可能會(huì)影響或破壞你的設(shè)計(jì)。這是CSS的10條技巧——優(yōu)秀實(shí)踐，可以幫助你從樣式中獲得很大的收益。
1.你真的需要一個(gè)框架嗎?
首先，確定你是否真的需要使用CSS框架。現(xiàn)在，有許多輕量級(jí)且健壯的替代框架。通常，你不會(huì)使用框架中的每個(gè)選擇器，因此你的軟件包將包含無(wú)效代碼。
如果你只在按鈕上使用樣式，那就把它們外包到自己的CSS文件中去，其他的就不用管了。另外，你可以使用DevTools中的代碼覆蓋率來(lái)識(shí)別未使用的CSS規(guī)則。
要打開(kāi)它，請(qǐng)?jiān)?ldquo;工具”面板中搜索Coverage，您可以通過(guò)單擊 Ctrl + Shift + P 打開(kāi)“工具”面板。
打開(kāi)后，單擊重新加載圖標(biāo)開(kāi)始錄制。紅色顯示的所有內(nèi)容均未使用。
你可以看到，在上面的例子中，它說(shuō)98%的CSS沒(méi)有被應(yīng)用。注意，實(shí)際上并不是這樣的——有些CSS樣式是在用戶與網(wǎng)站交互后才應(yīng)用的。移動(dòng)設(shè)備的樣式也被標(biāo)記為未使用的字節(jié)。因此，在刪除所有內(nèi)容之前，請(qǐng)確認(rèn)是否確實(shí)沒(méi)有在任何地方使用過(guò)。
2.首選使用CSS方法論
考慮為你的項(xiàng)目使用CSS方法論。CSS方法論是用來(lái)在你的CSS文件中創(chuàng)建一致性，它們有助于縮放和維護(hù)你的項(xiàng)目。以下是我可以推薦的一些流行的CSS方法論。
/ BEM /
BEM(塊，元素，修飾符)是比較流行的CSS方法論之一。它是命名約定的集合，可用于輕松制作可重復(fù)使用的組件。命名約定遵循以下模式：
- .block { ... }
- .block__element { ... }
- .block--modifier { ... }
- block——塊，代表一個(gè)組件。它們是獨(dú)立的實(shí)體，對(duì)自己有意義。
- block__element——這些是 .block 的一部分。它們沒(méi)有獨(dú)立的含義，必須綁定到一個(gè)塊上。
- block--modifier——這些用作塊或元素上的標(biāo)志。我們可以使用它們來(lái)更改元素的外觀，行為或狀態(tài)。例如，要使用隱藏標(biāo)志，我們可以說(shuō) .block--hidden。
/ ITCSS /
Inverted Triangle CSS 的縮寫，意思是“倒三角CSS”，通過(guò)將不同的圖層引入不同的特性來(lái)幫助您更好地組織文件。越深入，越具體。
/ OOCSS /
Object-oriented CSS，或者OOCSS，有兩個(gè)主要原則。
1.分離結(jié)構(gòu)和表皮
這意味著你要與結(jié)構(gòu)代碼分開(kāi)定義視覺(jué)效果。什么意思?
- /* 而不是 */
- .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;
- }
2.分隔容器和內(nèi)容
這意味著你不希望任何元素依賴于它的位置。相同的元素?zé)o論在頁(yè)面上的什么位置，都應(yīng)看起來(lái)相同。
- /* 而不是 */
- .main span.breadcumb { ... }
- /* 這樣 */
- .breadcrumb { ... }
3.設(shè)置預(yù)處理器
設(shè)置預(yù)處理器可以使你受益匪淺。預(yù)處理器是一種工具，可讓你使用CSS中不存在的高級(jí)功能，這些可能是循環(huán)變量甚至函數(shù)之類的東西。
有很多預(yù)處理器，可能最著名的三個(gè)是Sass，Less和Stylus。我建議使用Sass，因?yàn)樗纳鐓^(qū)非常繁榮，并且可以在網(wǎng)絡(luò)上找到大量的文檔。
那么，預(yù)處理器如何為你提供幫助?
/ 更好地組織你的樣式 /
他們具有將你的文件分解為較小的可重用文件的能力，這些文件可以相互導(dǎo)入，或者以后單獨(dú)導(dǎo)入到你的應(yīng)用程序中。
- // 將不同的模塊導(dǎo)入到一個(gè)SCSS文件中
- @import 'settings';
- @import 'tools';
- @import 'generic';
- @import 'elements';
- @import 'objects';
- @import 'components';
- @import 'trumps';
/ 嵌套你的選擇器 /
增強(qiáng)可讀性的另一種好方法是嵌套選擇器，這是CSS缺少的一個(gè)簡(jiǎn)單而強(qiáng)大的功能。
- .wrapper {
- .sidebar {
- &.collapsed {
- display: none;
- }
- .list {
- .list-item {
- ...
- &.list-item--active {
- ...
- }
- }
- }
- }
- }
層次化的結(jié)構(gòu)使得不同元素之間的聯(liá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ù)處理程序可以幫助我們使用混合函數(shù)來(lái)解決這個(gè)問(wèn)題，混合函數(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();
- }
不必一遍又一遍地寫出相同的內(nèi)容，而只需在需要時(shí)包含 mixin。
/ 使用后處理器 /
更好的選擇是后處理器。一旦CSS由預(yù)處理器生成，則后處理器可以運(yùn)行其他優(yōu)化步驟。比較受歡迎的后處理器之一是PostCSS。
可以使用PostCSS自動(dòng)為CSS規(guī)則添加前綴，因此不必?fù)?dān)心會(huì)遺漏主要的瀏覽器。
另一個(gè)很棒的后處理器是autoprefixer。使用autoprefixer，當(dāng)你想要支持最新的四個(gè)版本時(shí)，無(wú)需在CSS文件中寫入任何供應(yīng)商前綴就可以完成所有工作!
- const autoprefixer = require('autoprefixer')({
- browsers: [
- 'last 4 versions',
- 'not ie < 9'
- ]
- });
/ 使用配置進(jìn)行一致的設(shè)計(jì) /
除了 mixins 之外，你還可以選擇使用變量。與燒結(jié)機(jī)配合使用，你可以執(zhí)行設(shè)計(jì)規(guī)則。與linter配合使用，你可以執(zhí)行設(shè)計(jì)規(guī)則。
- // Font definitions
- $font-12: 12px;
- $font-21: 21px;
- // Color definitions
- $color-white: #FAFAFA;
- $color-black: #212121;
4.使用標(biāo)記代替CSS
現(xiàn)在，讓我們繼續(xù)討論實(shí)際的CSS。這經(jīng)常被忽略，通常，你可以通過(guò)簡(jiǎn)單地使用正確的HTML元素來(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)題，你可以覆蓋默認(rèn)的顯示、間距或字體樣式。可以通過(guò)使用 h1，h2 或 h3 來(lái)避免這種情況。默認(rèn)情況下，它們具有你要與其他元素一起實(shí)現(xiàn)的樣式，你可以立即擺脫四個(gè)不必要的規(guī)則，而且也更符合語(yǔ)義。
5.使用短屬性
為了進(jìn)一步減少規(guī)則數(shù)量，請(qǐng)始終嘗試使用簡(jiǎn)寫屬性。對(duì)于上面的示例，我們可以說(shuō)：
- .heading {
- margin: 1em 0;
- }
對(duì)于其他屬性，例如 padding，border 或 background 也是如此。
6.減少冗余
這與上一點(diǎn)緊密相關(guān)。有時(shí)很難發(fā)現(xiàn)冗余，尤其是當(dāng)重復(fù)規(guī)則在兩個(gè)選擇器中沒(méi)有遵循相同的順序時(shí)。但如果你的class只在一兩個(gè)規(guī)則上有差異，最好把這些規(guī)則外包出去，作為一個(gè)額外的class使用。而不是這樣的。
- <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)題。首先，提高的權(quán)重不僅會(huì)使以后更難重寫現(xiàn)有規(guī)則，而且會(huì)增加瀏覽器匹配選擇器的時(shí)間。
/ 匹配選擇器 /
當(dāng)瀏覽器試圖解釋選擇器并確定匹配的元素時(shí)，它們從右到左。就性能而言，這比其他方法要快。讓我們以下面的選擇器為例。
- .deeply .nested .selector span {
- ...
- }
你的瀏覽器將首先從 span 開(kāi)始。它將會(huì)匹配所有的 span標(biāo)簽，然后轉(zhuǎn)到下一個(gè)。它將過(guò)濾掉 .selector內(nèi)的 span，以此類推。
/ 理解選擇器 /
機(jī)器不僅解析困難，而且人類也難以理解。以以下為例：
- [type="checkbox"]:checked + [class$="-confirmation"]::after {
- ...
- }
你認(rèn)為上面的規(guī)則什么時(shí)候可以應(yīng)用?這個(gè)可以通過(guò)制作一個(gè)自定義類，用JavaScript進(jìn)行切換來(lái)簡(jiǎn)化。
8.不要?jiǎng)h除輪廓(Outline)
這是開(kāi)發(fā)人員在編寫CSS時(shí)最常犯的錯(cuò)誤之一。雖然你可能認(rèn)為刪除輪廓?jiǎng)?chuàng)建的高亮顯示并沒(méi)有什么不妥，但事實(shí)上，你正在使網(wǎng)站無(wú)法訪問(wèn)。通常的做法是在你的CSS中添加這個(gè)規(guī)則作為重設(shè)。
- :focus {
- outline: none;
- }
不過(guò)，這樣一來(lái)，只有鍵盤導(dǎo)航的用戶就不知道他們?cè)谀愕木W(wǎng)站上關(guān)注什么了。
如果默認(rèn)樣式對(duì)您的品牌不利，請(qǐng)創(chuàng)建自定義輪廓，只要確保在聚焦元素方面有某種指示即可。
9.移動(dòng)優(yōu)先
當(dāng)您必須處理媒體查詢時(shí)，請(qǐng)始終使用移動(dòng)優(yōu)先。以移動(dòng)設(shè)備為先的方法意味著您首先要開(kāi)始為小屏幕設(shè)備編寫CSS并從那里開(kāi)始構(gòu)建。這也稱為漸進(jìn)增強(qiáng)。
這將確保你大部分時(shí)間里添加額外的規(guī)則來(lái)滿足大屏幕設(shè)備的需求，而不是重寫現(xiàn)有的CSS規(guī)則。這可以減少你最終的規(guī)則數(shù)量。
如何判斷你是否使用了移動(dòng)優(yōu)先?如果你的媒體查詢使用的是 min-width，那么你就走對(duì)了。
- /* 移動(dòng)優(yōu)先的媒體查詢，高于600像素的所有內(nèi)容都會(huì)獲得以下樣式 */
- @media (min-width: 600px) {
- /* your CSS rules */
- }
- /* 非移動(dòng)優(yōu)先的媒體查詢，600px以下的都會(huì)得到以下樣式。 */
- @media (max-width: 600px) {
- /* your CSS rules */
- }
10.壓縮
最后，壓縮捆綁包以減小其尺寸。壓縮刪除注釋和空白，你的捆綁軟件需要較少的帶寬來(lái)獲取數(shù)據(jù)。
如果你還沒(méi)有，在服務(wù)器端也啟用壓縮功能。
進(jìn)一步減少CSS和標(biāo)記大小的另一種好方法是混淆類名。
為此，可以根據(jù)項(xiàng)目設(shè)置選擇幾個(gè)選項(xiàng)：
- Webpack：對(duì)于Webpack，可以使用 css-loader 模塊。
- Gulp：對(duì)于Gulp，您可以使用 gulp-minify-cssnames 插件。
- 創(chuàng)建你自己的實(shí)現(xiàn)：如果你沒(méi)有用于項(xiàng)目設(shè)置的專用軟件包，那么我會(huì)提供一個(gè)教程，向你展示如何創(chuàng)建自己的實(shí)現(xiàn)。
