分享20條編寫 CSS 代碼的建議
我要評論在這篇文章中，我想跟你分享 20 條由 CSS 社區(qū)推薦的約定和最佳實踐。 有些建議可能比較適合新手，而有些則更高級一些，但我希望每個人都可以在本篇文章中收獲自己不知道的知識。
01、謹慎使用外邊距屬性
與其它的屬性不同，垂直方向上的外邊距相遇時將會發(fā)生折疊。這意味著如果一個元素的下邊距遇到了另一個元素的上邊距，那么二者中較大的一個將被留下。下面是一個簡單的例子。
<div class="square red"></div>
<div class="square blue"></div>
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
其實上述兩個元素在垂直方向上的距離并不是 70px， 而是 40px， 藍色正方形的 margin 沒有被計算在內(nèi)。 有很多的方法消除這種默認的行為，但最好的方法是只使用一個方向上的 margin 屬性，比如說 margin-bottom 。
02、利用盒子模型布局
盒子模型自然有其存在的理由。float 和 inline-block 當然也可以工作，但它們都是樣式化文檔的基礎工具，而不是整個網(wǎng)站。從某種意義來說， Flexbox 是為更容易更精確創(chuàng)建我們想要的布局而設計的。
Flexbox 模型提供的一系列屬性給了開發(fā)者更大的靈活性，而且你一旦熟悉了它們，那創(chuàng)建任何響應式布局都是輕而易舉的事。瀏覽器對 Flexbox 的支持也已經(jīng)接近完美，所以已經(jīng)沒有什么理由能夠阻止你使用 Flexbox 了。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
03、執(zhí)行 CSS 重置
盡管這些年來情形已經(jīng)有所好轉(zhuǎn)，但是各瀏覽器的默認行為還是存在很多分歧。解決這個問題最好的辦法就是使用一個 CSS 重置文件為所有元素重新設置默認樣式。這可以讓你在一個純凈的樣式環(huán)境下工作，并且在所有瀏覽器中產(chǎn)生相同的結(jié)果。
有很多的庫做這個工作做的非常不錯，比如 normalize.css, minireset, 和 ress， 糾正了瀏覽器間的不一致。如果你不想使用庫，你也可以自己制作一個簡單的 CSS 重置，像下面這樣。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
這可能看上去比較苛刻，但是消除了默認的 margin 和 padding 我們將更容易的擺放我們的元素，而不用擔心它會占用額外的空間。box-sizing: border-box 是一個很受用的屬性，我們將在下面介紹這個屬性。
04、為所有元素使用 Border-box
許多初學者不知道 box-sizing 屬性，但它的確很重要。了解它的最好辦法就是看看它的兩個可選值。
content-box(default) - 當我們?yōu)樵卦O置了寬度和高度，但那只是內(nèi)容的尺寸。所有的 padding 和 border 都在不包含在內(nèi)容當中，也就是在內(nèi)容的外部。
舉例來說，如果我們有一個 div它的寬度為 100px， padding 為 10px, 那么它的實際寬度為 120px。
border-box - padding和 border 被包含在 寬度和高度當中。 如果一個 div 的寬度為 100px ，而被設置了 box-sizing: border-box， 那么它的寬度將始終是 100px， 無論你添加多少 padding 和 border 。
為所有元素設置 border-box 將有利于樣式化，而且你在也不用做乏味的數(shù)學運算了。
05、圖像作為背景當你為自己的站點添加圖片時，尤其是你想做響應式設計的時候，利用一個 div 標簽并為其設置 background 屬性，而不是使用 <img> 元素。
似乎額外的工作并沒有起到任何作用，但實際上這更利于你對圖片設置樣式，保持它們原有的尺寸或者根據(jù)比例變化，這需要借助 background-size，background-size 還有一些其它的屬性。
<section>
<p>Img element</p>
<img src="" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
這種技術(shù)的一個缺點是你頁面的可訪問性可能略有打擊，因為你的圖片不會被屏幕閱讀器和引擎正確抓取。 這個問題可以被 object-fit 解決，但它還不被所有瀏覽器支持。
06、更好的 Table 邊框
HTML 中的 table 沒什么意思。它們非常古怪，難以設計成響應式的，而且很難與整體風格一致。比如說，你想為 table 和其中的元素添加上邊框，你可能會得到下面的結(jié)果。
正如你所見到的，它有很多重復的邊框而且看起來不是很好，有一個非?？焖偾液唵蔚娜コp邊框的方法，就是將 border-collapse: collapse 添加到 table.
這樣看起來就好多了。
07、更好的注釋方式
CSS 可能不是一門編程語言但它的代碼仍然需要被記錄，所以一些簡單的注釋將會對你的同事或者未來的自己很有幫助！
對于 CSS 中的一些比較大的模塊，比如主要模塊或者媒體查詢，使用風格化的注釋并且在其后留下一些空行。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
設計中的一些細節(jié)或那些不是特別重要的模塊，可以用單行注釋。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，值得注意的是，CSS 中沒有 // 注釋，所以當你需要注釋的時候你需要使用 /* */ 符號。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
08、命名連接
當 class 或者 id 不止一個單詞的時候，需要使用 - 符號連接， CSS 對大小寫不敏感，所以駱駝命名法不是一個好的選擇。很久以前，下劃線不被支持所以破折號成為了默認約定。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
09、不要重復設置
CSS 的許多屬性值都是從 DOM 樹中的上一級繼承下來的，因此命名為層疊樣式表。讓我們以 font 為例 - 它幾乎總是繼承自父節(jié)點，你不需要為頁面中的每一個元素設置該屬性。
你只需要為 <html> 或者 <body> 設置 font 樣式，然后讓它一級一級流傳下去就可以了。 下面是一個很好的例子。
html {
font: normal 16px/1.4 sans-serif;
}
當然，在任何一個子元素中你都可以按照自己的需求改變這一樣式。我要說的就是能使用繼承獲得的屬性就不要再去一一指定了。
10、CSS 動畫與變換
不要通過直接更改元素的寬度和高度去動畫元素，或者是更改 left/right/top/bottom。最好的辦法是使用 transform() 屬性因為它提供了更加圓滑的過渡效果而且可以讓你的意圖在閱讀代碼時更加易于理解。
下面是一個例子，我們想動畫一個 ball，讓它往右滑動。 不要去改變 left 的值，最好是使用 translateX() 。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
transform 以及它的所有方法（translate, rotate, scale 等）擁有幾乎一致的瀏覽器兼容性，你可以自由使用它們。
11、不要 DIY, 使用庫
CSS 社區(qū)非常的龐大而且不斷出現(xiàn)新的庫。 庫被提供于各種用途，從小片段到完善的框架，用于構(gòu)建響應式程序，而且它們當中大部分都是開源的。
所以下次當你碰到 CSS 問題的時候，在你想自己動手去解決問題的時候，最好先去 Github 或者 CodePen 找找是否已經(jīng)存在可用的解決方案。
12、保持選擇器的特指度低
不是所有 CSS 選擇器都是生而相等的，當新手開發(fā)者書寫 CSS 代碼的時候通常期望它們寫的選擇器能夠覆蓋之前所有已存在的樣式。 但是事情并不總像我們想的那樣，就像下面這個例子：
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
我們想為所有按鈕添加 .active 類使其變?yōu)榧t色，但這是不起作用的，因為按鈕已經(jīng)被一個 id 選擇器設置了 background-color，而 id 選擇器具有更高的特指度。它們之間的規(guī)則就像下面這樣：
ID (#id) > Class (.class) > Type (比如 header)。
特指度是可以堆疊的，所以 a#button.active 的特指度是高于 a#button 的。 使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些原本存在的選擇器，這將最終導致 !important 效果。
13、不要使用 !important
很認真的告訴你，不要使用 !important。 即時的一個快速修復在將來可能導致大量的重寫。相反，找出你 CSS 選擇器不工作的原因，并且嘗試去修復它。
只有在一種情景中使用 !important 是可以接受的，那就是你想覆蓋那些在 HTML 中定義的行內(nèi)樣式。而且書寫行內(nèi)樣式也是一種非常糟糕的方式，建議停止使用。
14、使用 text-transform
在 HTML 中，當你使用大寫字母的時候可能是出于某種語義目的，比如說你想強調(diào)一個單詞的重要性。
<h3>Employees MUST wear a helmet!</h3>
如果出于某種目的你將一組文本都設置成大寫，可以在 HTML 中正常書寫文本，然后利用 CSS 轉(zhuǎn)換其大小寫。 它們看起來都是一樣的，但是如果不在上下文中，你的內(nèi)容將更有意義。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster { text-transform: uppercase;}
這同樣適用于大寫或者小寫的字符串 - text-transform 屬性可以將它們處理的很好。
15、Em， Rem 和 Pixel
人們在對元素和文本設置尺寸應該用 em，rem 還是 px 有很多的爭論。事實是，這三者都是可行的，有自己的優(yōu)點和缺點。
所有的開發(fā)者和項目都是不同的，所以不應該有什么嚴格的規(guī)則說明什么時候該用哪一種。下面是一些提示和良好的做法：
em - 1 em 的大小與直接父元素的字體大小有關(guān)。 通常用于媒體查詢，em 對響應式設計而言是非常棒的 ，但是將每個元素的 em 值轉(zhuǎn)換為 px 的比例是非常難以計算的，因為你可能要在 DOM 樹上逐級跟蹤元素。
rem - 以 <html> 元素中的 font-size 為基準， rem 將比例化頁面中的標題和段落變得很容易。保持 <html> 中默認的 font-size 并且為其它的元素設置 rem 是一種非常棒的方法。
px - 像素是最精確的控制方式，但是在 響應式設計中它并不友好，因為它不會隨屏幕大小變化而自動縮放。它們是可靠的，易于理解的，并且在值和實際結(jié)果之間呈現(xiàn)出良好的視覺聯(lián)系。
下面我要說的是，不要害怕嘗試。去使用它們并且找出哪一種是你最喜歡的。 有時候 em 和 rem 很省事，尤其對于響應式界面。
16、在大項目中使用預處理器
你可能已經(jīng)聽說過它們了 - Sass, Less, PostCSS, Stylus 。預處理器是 CSS 發(fā)展的下一階段。 它們提供的功能諸如變量， CSS 函數(shù)，選擇器嵌套以及其它一些非?？岬臇|西。這使得 CSS 代碼非常易于管理，尤其在大項目中。
舉個簡單的例子，下面是使用了 CSS 變量和函數(shù)的 Sass 代碼片段。
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
使用 CSS 預處理器的唯一缺點是，它們需要編譯成真正的 CSS 代碼，但是如果你已經(jīng)決定在你的項目中使用一個構(gòu)建腳本，那么這就不再是你應該煩惱的問題了。
如果你想了解更多關(guān)于預處理器的知識，請查看目前最受歡迎的兩個系統(tǒng)的教程 - Sass 和 Less。
17、Autoprefixers
為各個瀏覽器添加前綴算得上是書寫 CSS 代碼最惱人的問題了。它們不一致，你永遠無法精確的你需要哪一個，而且如果你真的去一個個適配并將它們都放到樣式表中，你會發(fā)現(xiàn)這是一場噩夢。
感謝上天，有很多工具可以自動的幫你實現(xiàn)這一過程，甚至可以讓你指定你需要支持的瀏覽器 ：
在線工具： Autoprefixer 文本編輯器插件 - Sublime Text, Atom 庫 - Autoprefixer
18、在項目中使用精簡代碼
為了提高網(wǎng)站或app的頁面加載速度我們需要總是使用精簡代碼 . 代碼的精簡版本會移除掉空白和重復的部分,這樣會削減文件的大小. 當然,這樣的話你的 CSS 代碼將會變得非常難以閱讀,所以最好總是提供一個 .min 的精簡版本和一個常規(guī)的發(fā)展版本.
有很多不同的方法去精簡 CSS 代碼 :
在線工具 - CSS Minifier, CSS Compressor 文本編輯插件 - Sublime Text, Atom 庫 - Minfiy , CSSO 和 CSSNano
根據(jù)你的工作流程,你可以選用上述一個選項,但是建議你總是使用某種方式自動執(zhí)行此過程。
19、Can I Use
不同的瀏覽器仍然存在著很多不一致的兼容性問題, 利用 caniuse 或者其它類似的服務檢測你正在使用的屬性是否被廣泛支持, 是否需要添加前綴, 或者說是否會在某平臺下出現(xiàn) bug .
僅僅檢測是否仍然是不夠的, 你仍然需要測試布局是否會無緣無故的崩潰. 充分了解用戶經(jīng)常使用的瀏覽器也會提供很大的幫助, 因此你可以看到好的支持是非常關(guān)鍵的.
20、Validate
驗證 CSS 代碼可能沒有驗證 HTML 或者 JavaScript 代碼重要, 但是在一個 CSS 驗證器上運行你的代碼還是有幫助的, 它會提示你是否書寫了錯誤或者比較糟糕的代碼, 甚至會給出一些比較中肯的建議幫助你改進代碼。
總結(jié)
以上所述是小編給大家介紹的20條編寫 CSS 代碼的建議，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這里為大家送上一份CSS代碼書寫規(guī)范究極指南,包括代碼注釋和命名規(guī)范以及空格縮進等一應俱全,都來自大家平時的約定俗成,絕對值得學習借鑒,需要的朋友可以參考下2016-05-27
編寫靈活、穩(wěn)定、高質(zhì)量的HTML和css代碼規(guī)范指南
這篇文章主要介紹了編寫靈活、穩(wěn)定、高質(zhì)量的HTML和css代碼規(guī)范指南，如何書寫規(guī)范的html以及css代碼，大家可以參考下文進行學習2016-03-10全面總結(jié)CSS代碼的編寫規(guī)范及優(yōu)化建議
這篇文章主要介紹了全面總結(jié)CSS代碼的編寫規(guī)范及優(yōu)化建議,從最基本的代碼塊格式到模塊化再到性能優(yōu)化,整理得相當詳細,十分推薦!需要的朋友可以參考下2016-02-23- 采用css縮寫div+css布局代碼，你會發(fā)現(xiàn)很簡潔很好看也是對網(wǎng)頁布局者的一個比較高的要求吧，接下來為網(wǎng)頁愛好者詳細介紹下，css樣式中常用的縮寫語法，感性的朋有可以參考2013-03-22
- 19UED前端CSS代碼規(guī)范 V1.0.2012-06-13
- 網(wǎng)頁制作Webjx文章簡介：Eric Meyer Reset和YUI Reset都是非常強大的，但是對于我而言，它們走的太遠了。我覺得你最終需要重置一切，然后重新定義所有元素的屬性。這就是為2009-04-02
閉合浮動元素讓CSS代碼更規(guī)范-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
按照CSS規(guī)范，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內(nèi)聯(lián)盒子（通常是文本）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸2008-10-17