這篇文章主要講解了“如何寫CSS樣式變得更規范”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何寫CSS樣式變得更規范”吧！
1. 按字母順序來排列css
不按字母順序排的：
代碼如下:
div#header h2 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的：
代碼如下:
div#header h2 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是這樣的：可以更好的找到某個屬性。
2. 更好的組織css結構
使用css注釋來給css分組，這樣結構明了，也有利于協同設計。
/*****Reset*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. 保持一致性
不要無意義的去討論到底一個選擇器的所有屬性寫在一行，還是每個屬性寫一行比較好。如果你就喜歡寫在一行，因為每排寫一行會讓整個文檔感覺太長了，找起來不方便。但是發給team的另一個人，他卻喜歡每句排一行，那怎么辦？其實很簡單，把css拿去w3c驗證，它會有一份結果，會自動轉換成每排一行。
4. 先標記 后css
對html的標記弄好后再寫css會比較不容易出錯。比如寫一個頁面，先寫一個最基本的標記結構<body>
代碼如下:
<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是盡量善用子選擇器，而不是一要給哪個元素進行樣式化，就給它添加個選擇器。
5. CSS Reset/重置
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下來應該根據你的項目改成你自己的reset.
* { margin: 0; padding: 0; }這句并不適用一些元素比如單選按鈕，不過有單選按鈕就重新給單選按鈕重設就好了嘛。
感謝各位的閱讀，以上就是“如何寫CSS樣式變得更規范”的內容了，經過本文的學習后，相信大家對如何寫CSS樣式變得更規范這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
