20條書寫CSS代碼
在這篇文章中，我想跟你分享 20 條由 css 社區推薦的約定和最佳實踐。 有些建議可能比較適合新手，而有些則更高級一些，但我但願每一個人均可以在本篇文章中收穫本身不知道的知識。php
0一、謹慎使用外邊距屬性css
與其它的屬性不一樣，垂直方向上的外邊距相遇時將會發生摺疊。這意味着若是一個元素的下邊距遇到了另外一個元素的上邊距，那麼兩者中較大的一個將被留下。下面是一個簡單的例子。html
<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 沒有被計算在內。 有不少的方法消除這種默認的行爲，但最好的方法是隻使用一個方向上的 margin 屬性，好比說 margin-bottom 。web
0二、利用盒子模型佈局編程
盒子模型天然有其存在的理由。float 和 inline-block 固然也能夠工做，但它們都是樣式化文檔的基礎工具，而不是整個網站。從某種意義來講， Flexbox 是爲更容易更精確建立咱們想要的佈局而設計的。瀏覽器
Flexbox 模型提供的一系列屬性給了開發者更大的靈活性，並且你一旦熟悉了它們，那建立任何響應式佈局都是垂手可得的事。瀏覽器對 Flexbox 的支持也已經接近完美，因此已經沒有什麼理由可以阻止你使用 Flexbox 了。app
.container { display: flex; /* Don't forget to add prefixes for Safari */ display: -webkit-flex; }
0三、執行 css 重置框架
儘管這些年來情形已經有所好轉，可是各瀏覽器的默認行爲仍是存在不少分歧。解決這個問題最好的辦法就是使用一個 CSS 重置文件爲全部元素從新設置默認樣式。這可讓你在一個純淨的樣式環境下工做，而且在全部瀏覽器中產生相同的結果。編程語言
有不少的庫作這個工做作的很是不錯，好比 normalize.css, minireset, 和 ress， 糾正了瀏覽器間的不一致。若是你不想使用庫，你也能夠本身製做一個簡單的 CSS 重置，像下面這樣。編輯器
* {
margin: 0; padding: 0; box-sizing: border-box; }
這可能看上去比較苛刻，可是消除了默認的 margin 和 padding 咱們將更容易的擺放咱們的元素，而不用擔憂它會佔用額外的空間。box-sizing: border-box 是一個很受用的屬性，咱們將在下面介紹這個屬性。
0四、爲全部元素使用 Border-box
許多初學者不知道 box-sizing 屬性，但它的確很重要。瞭解它的最好辦法就是看看它的兩個可選值。
content-box(default) - 當咱們爲元素設置了寬度和高度，但那只是內容的尺寸。全部的 padding 和 border 都在不包含在內容當中，也就是在內容的外部。
舉例來講，若是咱們有一個 div它的寬度爲 100px， padding 爲 10px, 那麼它的實際寬度爲 120px。
border-box - padding和 border 被包含在 寬度和高度當中。 若是一個 div 的寬度爲 100px ，而被設置了 box-sizing: border-box， 那麼它的寬度將始終是 100px， 不管你添加多少 padding 和 border 。
爲全部元素設置 border-box 將有利於樣式化，並且你在也不用作乏味的數學運算了。
0五、圖像做爲背景
當你爲本身的站點添加圖片時，尤爲是你想作響應式設計的時候，利用一個 div 標籤併爲其設置 background 屬性，而不是使用 <img> 元素。
彷佛額外的工做並無起到任何做用，但實際上這更利於你對圖片設置樣式，保持它們原有的尺寸或者根據比例變化，這須要藉助 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; }
這種技術的一個缺點是你頁面的可訪問性可能略有打擊，由於你的圖片不會被屏幕閱讀器和引擎正確抓取。 這個問題能夠被 object-fit 解決，但它還不被全部瀏覽器支持。
0六、更好的 Table 邊框
html 中的 table 沒什麼意思。它們很是古怪，難以設計成響應式的，並且很難與總體風格一致。好比說，你想爲 table 和其中的元素添加上邊框，你可能會獲得下面的結果。
正如你所見到的，它有不少重複的邊框並且看起來不是很好，有一個很是快速且簡單的去除雙邊框的方法，就是將 border-collapse: collapse 添加到 table.
這樣看起來就好多了。
0七、更好的註釋方式
CSS 可能不是一門編程語言但它的代碼仍然須要被記錄，因此一些簡單的註釋將會對你的同事或者將來的本身頗有幫助！
對於 CSS 中的一些比較大的模塊，好比主要模塊或者媒體查詢，使用風格化的註釋而且在其後留下一些空行。
/*--------------- #Header ---------------*/ header { } header nav { } /*--------------- #Slideshow ---------------*/ .slideshow { }
設計中的一些細節或那些不是特別重要的模塊，能夠用單行註釋。
/* 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; }
0八、命名鏈接
當 class 或者 id 不止一個單詞的時候，須要使用 - 符號鏈接， CSS 對大小寫不敏感，因此駱駝命名法不是一個好的選擇。好久之前，下劃線不被支持因此破折號成爲了默認約定。
/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }
0九、不要重複設置
CSS 的許多屬性值都是從 DOM 樹中的上一級繼承下來的，所以命名爲層疊樣式表。讓咱們以 font 爲例 - 它幾乎老是繼承自父節點，你不須要爲頁面中的每個元素設置該屬性。
你只須要爲 <html> 或者 <body> 設置 font 樣式，而後讓它一級一級流傳下去就能夠了。 下面是一個很好的例子。
html { font: normal 16px/1.4 sans-serif; }
固然，在任何一個子元素中你均可以按照本身的需求改變這同樣式。我要說的就是能使用繼承得到的屬性就不要再去一一指定了。
十、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 等）擁有幾乎一致的瀏覽器兼容性，你能夠自由使用它們。
十一、不要 DIY, 使用庫
CSS 社區很是的龐大並且不斷出現新的庫。 庫被提供於各類用途，從小片斷到完善的框架，用於構建響應式程序，並且它們當中大部分都是開源的。
因此下次當你碰到 CSS 問題的時候，在你想本身動手去解決問題的時候，最好先去 Github 或者 CodePen 找找是否已經存在可用的解決方案。
十二、保持選擇器的特指度低
不是全部 CSS 選擇器都是生而相等的，當新手開發者書寫 CSS 代碼的時候一般指望它們寫的選擇器可以覆蓋以前全部已存在的樣式。 可是事情並不總像咱們想的那樣，就像下面這個例子：
a{ color: #fff; padding: 15px; } a#blue-btn { background-color: blue; } a.active { background-color: red; }
咱們想爲全部按鈕添加 .active 類使其變爲紅色，但這是不起做用的，由於按鈕已經被一個 id 選擇器設置了 background-color，而 id 選擇器具備更高的特指度。它們之間的規則就像下面這樣：
ID (#id) > Class (.class) > Type (好比 header)。
特指度是能夠堆疊的，因此 a#button.active 的特指度是高於 a#button 的。 使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些本來存在的選擇器，這將最終致使 !important 效果。
1三、不要使用 !important
很認真的告訴你，不要使用 !important。 即時的一個快速修復在未來可能致使大量的重寫。相反，找出你 CSS 選擇器不工做的緣由，而且嘗試去修復它。
只有在一種情景中使用 !important 是能夠接受的，那就是你想覆蓋那些在 HTML 中定義的行內樣式。並且書寫行內樣式也是一種很是糟糕的方式，建議中止使用。
1四、使用 text-transform
在 HTML 中，當你使用大寫字母的時候多是出於某種語義目的，好比說你想強調一個單詞的重要性。
<h3>Employees MUST wear a helmet!</h3>
若是出於某種目的你將一組文本都設置成大寫，能夠在 HTML 中正常書寫文本，而後利用 CSS 轉換其大小寫。 它們看起來都是同樣的，可是若是不在上下文中，你的內容將更有意義。
<div class="movie-poster">Star Wars: The Force Awakens</div> .movie-poster { text-transform: uppercase;}
這一樣適用於大寫或者小寫的字符串 - text-transform 屬性能夠將它們處理的很好。
1五、Em， Rem 和 Pixel
人們在對元素和文本設置尺寸應該用 em，rem 仍是 px 有不少的爭論。事實是，這三者都是可行的，有本身的優勢和缺點。
全部的開發者和項目都是不一樣的，因此不該該有什麼嚴格的規則說明何時該用哪種。下面是一些提示和良好的作法：
em - 1 em 的大小與直接父元素的字體大小有關。 一般用於媒體查詢，em 對響應式設計而言是很是棒的 ，可是將每一個元素的 em 值轉換爲 px 的比例是很是難以計算的，由於你可能要在 DOM 樹上逐級跟蹤元素。
rem - 以 <html> 元素中的 font-size 爲基準， rem 將比例化頁面中的標題和段落變得很容易。保持 <html> 中默認的 font-size 而且爲其它的元素設置 rem 是一種很是棒的方法。
px - 像素是最精確的控制方式，可是在 響應式設計中它並不友好，由於它不會隨屏幕大小變化而自動縮放。它們是可靠的，易於理解的，而且在值和實際結果之間呈現出良好的視覺聯繫。
下面我要說的是，不要懼怕嘗試。去使用它們而且找出哪種是你最喜歡的。 有時候 em 和 rem 很省事，尤爲對於響應式界面。
1六、在大項目中使用預處理器
你可能已經據說過它們了 - Sass, Less, PostCSS, Stylus 。預處理器是 CSS 發展的下一階段。 它們提供的功能諸如變量， CSS 函數，選擇器嵌套以及其它一些很是酷的東西。這使得 CSS 代碼很是易於管理，尤爲在大項目中。
舉個簡單的例子，下面是使用了 CSS 變量和函數的 Sass 代碼片斷。
$accent-color: #2196F3; a { padding: 10px 15px; background-color: $accent-color; } a:hover { background-color: darken($accent-color,10%); }
使用 CSS 預處理器的惟一缺點是，它們須要編譯成真正的 CSS 代碼，可是若是你已經決定在你的項目中使用一個構建腳本，那麼這就再也不是你應該煩惱的問題了。
若是你想了解更多關於預處理器的知識，請查看目前最受歡迎的兩個系統的教程 - Sass 和 Less。
1七、Autoprefixers
爲各個瀏覽器添加前綴算得上是書寫 CSS 代碼最惱人的問題了。它們不一致，你永遠沒法精確的你須要哪個，並且若是你真的去一個個適配並將它們都放到樣式表中，你會發現這是一場噩夢。
感謝上天，有不少工具能夠自動的幫你實現這一過程，甚至可讓你指定你須要支持的瀏覽器 ：
在線工具： Autoprefixer
文本編輯器插件 - Sublime Text, Atom
庫 - Autoprefixer
1八、在項目中使用精簡代碼
爲了提升網站或app的頁面加載速度咱們須要老是使用精簡代碼 . 代碼的精簡版本會移除掉空白和重複的部分,這樣會削減文件的大小. 固然,這樣的話你的 CSS 代碼將會變得很是難以閱讀,因此最好老是提供一個 .min 的精簡版本和一個常規的發展版本.
有不少不一樣的方法去精簡 CSS 代碼 :
-
在線工具 - CSS Minifier, CSS Compressor
-
文本編輯插件 - Sublime Text, Atom
-
庫 - Minfiy , CSSO 和 CSSNano
根據你的工做流程,你能夠選用上述一個選項,可是建議你老是使用某種方式自動執行此過程。
廣州vi設計公司 http://www.maiqicn.com 個人007辦公資源網 https://www.wode007.com
1九、Can I Use
不一樣的瀏覽器仍然存在着不少不一致的兼容性問題, 利用 caniuse 或者其它相似的服務檢測你正在使用的屬性是否被普遍支持, 是否須要添加前綴, 或者說是否會在某平臺下出現 bug .
僅僅檢測是否仍然是不夠的, 你仍然須要測試佈局是否會平白無故的崩潰. 充分了解用戶常用的瀏覽器也會提供很大的幫助, 所以你能夠看到好的支持是很是關鍵的.
20、Validate
驗證 CSS 代碼可能沒有驗證 HTML 或者 JavaScript 代碼重要, 可是在一個 CSS 驗證器上運行你的代碼仍是有幫助的, 它會提示你是否書寫了錯誤或者比較糟糕的代碼, 甚至會給出一些比較中肯的建議幫助你改進代碼
- 1. 20條書寫 CSS 代碼的建議
- 2. CSS代碼縮寫
- 3. 2021-02-20：手寫代碼：讀寫鎖。
- 4. less編寫css代碼
- 5. css 代碼編寫技巧
- 6. css hack書寫
- 7. 僞代碼的書寫
- 8. Python 代碼書寫規範
- 9. C++代碼書寫規範
- 10. vue書寫錄音代碼
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Eclipse 代碼模板 - Eclipse 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 20條書寫 CSS 代碼的建議
- 2. CSS代碼縮寫
- 3. 2021-02-20：手寫代碼：讀寫鎖。
- 4. less編寫css代碼
- 5. css 代碼編寫技巧
- 6. css hack書寫
- 7. 僞代碼的書寫
- 8. Python 代碼書寫規範
- 9. C++代碼書寫規範
- 10. vue書寫錄音代碼