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

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&gt;

嘗試使用類似的方法：

<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&gt;

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 倒三角_改善CSS的10种最佳做法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。