改善CSS的10種最佳做法,幫助你從樣式中獲得最大的收益

CSS似乎是一種非常簡單的語言,很難在其中犯錯誤。你只需添加樣式規則,就可以對網站進行樣式設置了,對嗎?對於只需要幾個CSS文件的小型網站,情況可能就是這樣。但是在大型應用程序中,樣式可能會迅速失控。你如何使它們易於管理?
在這裏插入圖片描述
事實是,就像其他任何語言一樣,CSS可能會影響或破壞你的設計。這是CSS的10條最佳實踐技巧,可以幫助你從樣式中獲得最大的收益。

1.你真的需要一個框架嗎?
首先,確定你是否真的需要使用CSS框架。現在,有許多輕量級的替代健壯框架。通常,你不會使用框架中的每個選擇器,因此你的軟件包將包含無效代碼。

如果僅對按鈕樣式使用,則將樣式外包給你的CSS文件,然後刪除其餘樣式。另外,你可以使用DevTools中的代碼覆蓋率來識別未使用的CSS規則。
在這裏插入圖片描述
要打開它,請在“工具”面板中搜索Coverage。你也可以通過單擊Ctrl+ Shift+ 打開“工具”面板P。打開後,單擊重新加載圖標開始錄製。紅色顯示的所有內容均未使用。

你可以在上面的示例中看到,它說沒有使用98%的CSS。請注意,實際上並非如此,某些CSS樣式僅在用戶與網站互動後才應用。移動設備的樣式也標記爲未使用的字節。因此,在刪除所有內容之前,請確保確認確實沒有在任何地方使用它。
2、首選使用CSS方法
考慮爲你的項目使用CSS方法。CSS方法用於在CSS文件中創建一致性。它們有助於擴展和維護你的項目。這是我可以推薦的一些流行的CSS方法。

BEM

BEM(塊,元素,修飾符)是最流行的CSS方法之一。它是命名約定的集合,可用於輕鬆製作可重複使用的組件。命名約定遵循以下模式:

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

.block:塊代表一個組件。它們是獨立的實體,並且對自己有意義。
.block__element:這些是的一部分.block。它們沒有獨立的含義,必須綁定到一個塊上。
.block–modifier:這些用作塊或元素上的標誌。我們可以使用它們來更改元素的外觀,行爲或狀態。例如,要使用隱藏標記,我們可以說.block–hidden。

ITCSS

倒三角CSS通過將不同的圖層引入不同的特性來幫助你更好地組織文件。你走得越深,就越具體。
在這裏插入圖片描述
OOCSS
面向對象的CSS或OOCSS具有兩個主要原理。

分離結構和皮膚

這意味着你要與結構代碼分開定義視覺效果。實際上這是什麼意思?

/* Instead of  */
.box {
    width: 250px;
    height: 250px;
    padding: 10px;
    border: 1px solid #CCC;
    box-shadow: 1px 2px 5px #CCC;
    border-radius: 5px;
}

/* Do */
.box {
    width: 250px;
    height: 250px;
    padding: 10px;
}

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

改善CSS的10種最佳做法,幫助你從樣式中獲得最大的收益

正在禿頭的程序員
2020-05-18 10:41
CSS似乎是一種非常簡單的語言,很難在其中犯錯誤。你只需添加樣式規則,就可以對網站進行樣式設置了,對嗎?對於只需要幾個CSS文件的小型網站,情況可能就是這樣。但是在大型應用程序中,樣式可能會迅速失控。你如何使它們易於管理?

事實是,就像其他任何語言一樣,CSS可能會影響或破壞你的設計。這是CSS的10條最佳實踐技巧,可以幫助你從樣式中獲得最大的收益。

1.你真的需要一個框架嗎?
首先,確定你是否真的需要使用CSS框架。現在,有許多輕量級的替代健壯框架。通常,你不會使用框架中的每個選擇器,因此你的軟件包將包含無效代碼。

如果僅對按鈕樣式使用,則將樣式外包給你的CSS文件,然後刪除其餘樣式。另外,你可以使用DevTools中的代碼覆蓋率來識別未使用的CSS規則。

要打開它,請在“工具”面板中搜索Coverage。你也可以通過單擊Ctrl+ Shift+ 打開“工具”面板P。打開後,單擊重新加載圖標開始錄製。紅色顯示的所有內容均未使用。

你可以在上面的示例中看到,它說沒有使用98%的CSS。請注意,實際上並非如此,某些CSS樣式僅在用戶與網站互動後才應用。移動設備的樣式也標記爲未使用的字節。因此,在刪除所有內容之前,請確保確認確實沒有在任何地方使用它。

本次給大家推薦一個免費的學習蔻qun,前面603 中間985最後993,
裏面概括應用網站開發,css,html,JavaScript,jQuery,Vue、Ajax,node,
angular等。對web前端開發技術感興趣的同學,
不管你是小白還是大牛我都歡迎,每天技術分享。

2、首選使用CSS方法
考慮爲你的項目使用CSS方法。CSS方法用於在CSS文件中創建一致性。它們有助於擴展和維護你的項目。這是我可以推薦的一些流行的CSS方法。

BEM

BEM(塊,元素,修飾符)是最流行的CSS方法之一。它是命名約定的集合,可用於輕鬆製作可重複使用的組件。命名約定遵循以下模式:

.block { … }
.block__element { … }
.block–modifier { … }
.block:塊代表一個組件。它們是獨立的實體,並且對自己有意義。
.block__element:這些是的一部分.block。它們沒有獨立的含義,必須綁定到一個塊上。
.block–modifier:這些用作塊或元素上的標誌。我們可以使用它們來更改元素的外觀,行爲或狀態。例如,要使用隱藏標記,我們可以說.block–hidden。

ITCSS

倒三角CSS通過將不同的圖層引入不同的特性來幫助你更好地組織文件。你走得越深,就越具體。

OOCSS
面向對象的CSS或OOCSS具有兩個主要原理。

分離結構和皮膚

這意味着你要與結構代碼分開定義視覺效果。實際上這是什麼意思?

/* Instead of */
.box {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}

/* Do */
.box {
width: 250px;
height: 250px;
padding: 10px;
}

.elevated {
border: 1px solid #CCC;
box-shadow: 1px 2px 5px #CCC;
border-radius: 5px;
}
2、分隔容器和內容

這意味着你不希望任何元素取決於其位置。相同的元素無論在頁面上的什麼位置,都應看起來相同。

/* Instead */.main span.breadcumb { ... }/* Do */.breadcrumb { ... }

3、設置預處理器
設置預處理器可以使你受益匪淺。預處理器是一種工具,可讓你使用CSS中不存在的高級功能。這些可能是循環變量甚至函數之類的東西。

有很多預處理器。最著名的三個大概就是Sass,Less和Stylus。我建議使用Sass,因爲它是一個繁榮的社區,並且你可以在網上找到它的大量文檔。

那麼,預處理器如何爲你提供幫助?更好地組織你的風格

預處理程序可幫助你更好地組織樣式。他們具有將你的文件分解爲較小的可重用文件的能力。這些可以相互導入,也可以以後分別導入你的應用程序。

// Import different modules into one SCSS file
@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);
}

預處理器通過mixins幫助我們解決此問題-可以代替硬編碼值使用的函數。


@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。

你可以使用PostCSS來自動爲CSS規則添加前綴,因此你不必擔心會遺漏主要的瀏覽器。他們使用“ 我可以使用”中的值,因此它始終是最新的。

另一個很棒的後處理器是autoprefixer。使用autoprefixer,當你要支持最後四個版本時,無需在CSS文件中寫入任何瀏覽器前綴就可以完成所有工作!

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

使用配置進行一致的設計
除mixins外,你還可以選擇使用變量。用短線連接一起,你可以執行設計規則。

// Font definitions
$font-12: 12px;
$font-21: 21px;
// Color definitions
$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標籤,然後轉到下一個標籤。它將濾除類中的spans,.selector依此類推。

不建議將標記用於CSS選擇器,因爲它會與每個標記匹配。雖然差異只能在幾分之一毫秒內測量,但總的來說很少。更重要的是,減少其他原因的複雜性是一個好習慣。

瞭解選擇器
機器解析不僅困難,而且人類也難以解析。以下面代碼爲例:

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

你認爲上述規則何時適用?通過創建自定義類並使用JavaScript進行切換,可以簡化此過程。

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

現在看起來更加愉快。如果你仍然需要一個過於複雜的選擇器,並且認爲別無選擇,請在下面留下評論以解釋你的解決方案。

/**
 * Creates a confirmation icon after a checkbox is selected.
 * Select all labels ending with a class name of "-confirmation"
 * that are preceeded by a checked checkbox.
 * PS.: There's no other way to get around this, don't try to fix it.
 **/
.checkbox:checked + label[class$="-confirmation"]::after {
    ...
}

8、不要刪除輪廓
這是開發人員在編寫CSS時最常犯的錯誤之一。儘管你可能認爲刪除輪廓創建的突出顯示沒有任何問題,但實際上,你使網站無法訪問。通常將此規則添加爲CSS的重置值。

:focus {
    outline: none;
}

但是,通過這種方式,僅使用鍵盤導航的用戶就不會知道他們正在關注你的網站。

如果默認樣式對你的品牌不利,請創建自定義輪廓。只要確保在聚焦元素方面有某種指示即可。

9、首先使用移動設備
當你必須處理媒體查詢時,請始終使用移動優先。以移動設備爲先的方法意味着你首先要開始爲小屏幕設備編寫CSS並從那裏開始構建。這也稱爲漸進增強。

這將確保你主要添加額外的規則來迎合大屏幕設備,而不是重寫現有的CSS規則。這樣可以減少最終使用的規則數量。

你如何判斷是否使用移動優先?如果你的媒體查詢使用min-width,那麼你將走上正確的道路。

/* Mobile-first media query, everything above 600px will get the below styles */
@media (min-width: 600px) {
    /* your CSS rules */
}

/* Non mobile-first media query, everything below 600px will get the below styles */
@media (max-width: 600px) {
    /* your CSS rules */
}

10、壓縮
最後,壓縮捆綁文件以減小其大小。壓縮刪除註釋和空白,你的捆綁軟件就可以快速的獲取數據。

如果還沒有,請在服務器端也啓用壓縮。

進一步減少CSS 和標記大小的另一種好方法是混淆類名。

爲此,你可以根據項目設置選擇幾個選項:

Webpack:對於Webpack,可以使用該css-loader模塊。
Gulp:對於Gulp,你可以使用gulp-minify-cssnames插件。
創建自己的:如果你沒有用於項目設置的專用軟件包,那麼我會提供一個教程,向您展示如何創建自己的實現。
總結

遵循以上10個簡單步驟將有助於你編寫的CSS文件,更輕輕,易維護,更好擴展。

不僅如此,而且使用諸如預定義的調色板或版式規則之類的實用程序,將幫助你創建更一致的設計。你的樣式也將更可重用,因此可以節省下一個項目的時間。

你遵循哪些其他CSS最佳實踐,但本文未提及到的?你可以給我們留言,讓我們在評論中學習!

感謝你抽出寶貴的時間閱讀本文,祝你編碼愉快!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章