CSS要怎麼寫才規範，提高可讀性？
柯小艾2017-06-13 18:08:09用於選擇器的類名和 ID 名儘可能使用統一的命名方式（參考 BEM、SUIT、SMACSS 等的思想）。
在較複雜的 CSS 檔案中注意使用註釋和分組。
編寫時根據實際環境，適度考慮響應式和漸進的問題。
儘可能減少使用 hack 和廢棄的規範。
適度使用預/後處理器配合編寫 CSS，但不要過度依賴。
時刻牢記 DRY，不要重複無謂的工作。
不過個人認為，剛開始其實沒必要太在意這個，熟悉了就會注意的。
Murphy2017-06-14 19:57:04首先，關於程式碼規範這個專案
https：//
github。com/ecomfe/spec
應該對題主有幫助
摘要
Javascript編碼規範
Javascript編碼規範 - ESNext補充篇
HTML編碼規範 ［1。2］
CSS編碼規範 ［1。2］
Less編碼規範 ［1。1］
E-JSON資料傳輸標準 ［1。0］
模組和載入器規範 ［1。1］
包結構規範 ［1。1］
專案目錄結構規範 ［1。1］
圖表庫標準 ［1。0］
react編碼規範 ［draft］
另 CSS程式碼初始化
CSS初始化指重設瀏覽器樣式，使不同瀏覽器對標籤的樣式儘量統一。
舉個栗子。考慮相容性，簡單的初始化方法 ：
*
{
padding
：
0
；
margin
：
0
；}
還有例如考慮瀏覽器盒模型之間的差異（主要和IE）
body
{
box-sizeing
：
border-box
；
/* Firefox */
-moz-
box-sizing
：
border-box
；
/* Safari*/
-webkit-
box-sizing
：
border-box
；
}
一些CSS初始化的工具:
CSS Tools： Reset CSS
CSS Reset - YUI Library
一些具體的例子：
以下內容轉自各大網站CSS程式碼初始化集合_慕課手記
騰訊QQ官網樣式初始化（
http：//www。
qq。com
）
body
，
ol
，
ul
，
h1
，
h2
，
h3
，
h4
，
h5
，
h6
，
p
，
th
，
td
，
dl
，
dd
，
form
，
fieldset
，
legend
，
input
，
textarea
，
select
{
margin
：
0
；
padding
：
0
}
body
{
font
：
12
px
“宋體”
，
“Arial Narrow”
，
HELVETICA
；
background
：
#fff
；
-webkit-
text-size-adjust
：
100
%
；}
a
{
color
：
#2d374b
；
text-decoration
：
none
}
a
：
hover
{
color
：
#cd0200
；
text-decoration
：
underline
}
em
{
font-style
：
normal
}
li
{
list-style
：
none
}
img
{
border
：
0
；
vertical-align
：
middle
}
table
{
border-collapse
：
collapse
；
border-spacing
：
0
}
p
{
word-wrap
：
break-word
}
新浪官網樣式初始化（
http：//www。
sina。com。cn/
）
body
，
ul
，
ol
，
li
，
p
，
h1
，
h2
，
h3
，
h4
，
h5
，
h6
，
form
，
fieldset
，
table
，
td
，
img
，
div
{
margin
：
0
；
padding
：
0
；
border
：
0
；}
body
{
background
：
#fff
；
color
：
#333
；
font-size
：
12
px
；
margin-top
：
5
px
；
font-family
：
“SimSun”
，
“宋體”
，
“Arial Narrow”
；}
ul
，
ol
{
list-style-type
：
none
；}
select
，
input
，
img
，
select
{
vertical-align
：
middle
；}
a
{
text-decoration
：
none
；}
a
：
link
{
color
：
#009
；}
a
：
visited
{
color
：
#800080
；}
a
：
hover
，
a
：
active
，
a
：
focus
{
color
：
#c00
；
text-decoration
：
underline
；}
淘寶官網樣式初始化（
http：//www。
taobao。com/
）
body
，
h1
，
h2
，
h3
，
h4
，
h5
，
h6
，
hr
，
p
，
blockquote
，
dl
，
dt
，
dd
，
ul
，
ol
，
li
，
pre
，
form
，
fieldset
，
legend
，
button
，
input
，
textarea
，
th
，
td
{
margin
：
0
；
padding
：
0
；
}
body
，
button
，
input
，
select
，
textarea
{
font
：
12
px
/
1。5
tahoma
，
arial
，
\
5
b8b
\
4
f53
；
}
h1
，
h2
，
h3
，
h4
，
h5
，
h6
{
font-size
：
100
%
；
}
address
，
cite
，
dfn
，
em
，
var
{
font-style
：
normal
；
}
code
，
kbd
，
pre
，
samp
{
font-family
：
couriernew
，
courier
，
monospace
；
}
small
{
font-size
：
12
px
；
}
ul
，
ol
{
list-style
：
none
；
}
a
{
text-decoration
：
none
；
}
a
：
hover
{
text-decoration
：
underline
；
}
sup
{
vertical-align
：
text
-
top
；
}
sub
{
vertical-align
：
text
-
bottom
；
}
legend
{
color
：
#000
；
}
fieldset
，
img
{
border
：
0
；
}
button
，
input
，
select
，
textarea
{
font-size
：
100
%
；
}
table
{
border-collapse
：
collapse
；
border-spacing
：
0
；
}
網易官網樣式初始化（
http：//www。
163。com/
）
html
{
overflow-y
：
scroll
；}
body
{
margin
：
0
；
padding
：
29
px00
；
font
：
12
px
“\5B8B\4F53”
，
sans-serif
；
background
：
#ffffff
；}
div
，
dl
，
dt
，
dd
，
ul
，
ol
，
li
，
h1
，
h2
，
h3
，
h4
，
h5
，
h6
，
pre
，
form
，
fieldset
，
input
，
textarea
，
blockquote
，
p
{
padding
：
0
；
margin
：
0
；}
table
，
td
，
tr
，
th
{
font-size
：
12
px
；}
li
{
list-style-type
：
none
；}
img
{
vertical-align
：
top
；
border
：
0
；}
ol
，
ul
{
list-style
：
none
；}
h1
，
h2
，
h3
，
h4
，
h5
，
h6
{
font-size
：
12
px
；
font-weight
：
normal
；}
address
，
cite
，
code
，
em
，
th
{
font-weight
：
normal
；
font-style
：
normal
；
最後，我也是前端新手，第一次寫答案雖然內容簡單還是覺得用這編輯器心好累。還是寫程式碼爽。貢獻出辣麼多精華答案的大大們好偉大>“<。
但是覺得題主才大一就確定了工作方向是不是太早了。。萬一你接觸到了其他的方向以後發現更適合自己呢？
強迫症的我估計再讀一遍問題會忍不住修改的。。有病句。。¬_¬
啟動超級變換形態2017-06-15 22:27:31去了解一下BEM
王帥2017-06-16 16:48:48第一
拿過一個專案來不要著急去寫程式碼，先了解整站的樣式結構，分析構思整體的框架，將設計圖分類。
第二
開始編寫整站的構架，css樣式的複用性一定要高，前期可能寫的會比較慢，等框架搭建好之後，其餘的頁面基本上是套class，然後特殊的地方用特殊的命名，特殊處理。你會發現框架搭好之後一天可以寫10幾個頁面都不是問題。
第三
套頁面。
總結
構思框架比敲程式碼要重要的多，而且維護起來要簡單的多。初始化樣式一定要單獨寫，比如表單，按鈕，輸入框，彈出框，分頁器等。
多寫多練慢慢體會就好了。
知乎使用者2017-06-16 16:52:05要操作樣式的話儘量用class屬性來標識。然後命名要語義化。儘量讓人一看就知道這個是什麼部分。這個元件是幹嘛用的。
css命名規則
可以參考這個連結的一些命名。
如果要操作dom的話儘量用id來標識。命名id的時候要注意駝峰命名法。