每個(gè)設(shè)計(jì)師應(yīng)有的9個(gè)CSS規(guī)則
深圳網(wǎng)站建設(shè)不需要得到比你需要的更復(fù)雜的結(jié)構(gòu)。寫一個(gè)CSS樣式表，易于維護(hù)，是很容易的，只要按照這9個(gè)規(guī)則。
你組織CSS的深度能極大地阻礙將來(lái)出現(xiàn)的任何必要的調(diào)整。因此，我向我的團(tuán)隊(duì)提出了一個(gè)問(wèn)題，讓我們仔細(xì)看看一些最有趣的CSS編碼結(jié)構(gòu)，并將它們列在下面，您可以在您開(kāi)發(fā)的每個(gè)項(xiàng)目中使用這些代碼結(jié)構(gòu)。

1）縮進(jìn)后代和相關(guān)規(guī)則：
這使您可以輕松地識(shí)別CSS中的頁(yè)面結(jié)構(gòu)以及如何相互關(guān)聯(lián)的部分。
1.#main {
2.width: 530px;
3.padding: 10px;
4.float: left;
5.}
6.#main #nav{
7.background: #fff;
8.width:100%
9.}
10.#main #left-col {
11.background: #efefef;
12.margin: 8px 0;
13.}

2）對(duì)CSS規(guī)則進(jìn)行分組和注釋
設(shè)置CSS文件中始終存在的某些部分：頁(yè)面結(jié)構(gòu)、鏈接、頁(yè)眉、頁(yè)腳、列表等。這些部分總是CSS注釋，以適當(dāng)?shù)孛總€(gè)部分。

1./* Header Styles Go Here **************/
2....CSS Code Goes Here…
3./* End Header Styles *************/
1.Header
2.Structure
3.Navigation
4.Forms
5.Links
6.Headers
7.Content
8.Lists
9.Common Classes

3）在單行線上保留樣式類型。
使用簡(jiǎn)寫屬性將屬性組合到一行上意味著CSS更容易理解和編輯。
而不是這個(gè)：

1.h2{ color: #dfdfdf;
2.font-size: 80%;
3.margin: 5px;
4.padding: 10px;
5.}

做這個(gè)：
h5{color: #dfdfdf; font-size: 80%; margin: 5px; padding: 10px;}

4）把CSS分解成表格
分開(kāi)你的CSS樣式表的不同部分，使用一個(gè)樣式表布局，另一個(gè)排版和另一種顏色。布局/印刷性能的混合會(huì)讓你發(fā)現(xiàn)你是不必要地重復(fù)自己。
1.#main { @import "/css/layout.css";
2.@import "/css/typography.css";
3.@import "/css/design.css";
4.@import "/css/design-home.css";
5.@import "/css/extra.css";

5）重置元素
許多設(shè)計(jì)師清楚他們的表的造型與全局復(fù)位，對(duì)一些元素如按鈕和字段集，被完全摧毀的全局復(fù)位的影響。相反，你應(yīng)該選擇你想設(shè)置的元素。
所以不要這樣做
*{ margin: 0; padding: 0; }

做這個(gè)

1.html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
2.margin: 0;
3.padding: 0;
4.border: 0;
5.outline: 0;
6.font-weight: inherit;
7.font-style: inherit;
8.font-size: 100%;
9.font-family: inherit;
10.vertical-align: baseline;
11.}

6）為參考，在一個(gè)地方的地方色彩方案。
在開(kāi)始CSS文件之前，注釋一下常用的顏色并將其添加到樣式表的頂部。這樣可以節(jié)省大量的時(shí)間，并確保站點(diǎn)具有一個(gè)配色方案。
/* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7）使用意義命名系統(tǒng)。
擁有類和id的命名系統(tǒng)可以在更新文檔或調(diào)試時(shí)節(jié)省大量時(shí)間，可以使用父/子結(jié)構(gòu)。父容器就是容器。所以，如果我們的div命名為“頭”，和兩個(gè)div嵌套的“菜單”和“標(biāo)志”。CSS中的命名結(jié)構(gòu)如下：
#header #header_menu #header_logo

8）按字母順序排列的屬性
它使查找特定屬性更容易。
1.body {
2.background:#fdfdfd;
3.color:#333; font-size:1em;
4.line-height:1.4;
5.margin:0;
6.padding:0; }

9）建立一個(gè)有用的CSS類庫(kù)。
對(duì)于調(diào)試有用，但應(yīng)避免在發(fā)行版中（單獨(dú)的標(biāo)記和表示）。由于可以使用多個(gè)類名，所以可以使用它們調(diào)試標(biāo)記。
1..width100 { width: 100%; }
2..width75 { width: 75%; }
3..floatLeft { float: left; }
4..alignLeft { text-align: left; }
5..alignRight { text-align: right; }

保持簡(jiǎn)單
不需要得到比你需要的更復(fù)雜的結(jié)構(gòu)。簡(jiǎn)單可以節(jié)省你的時(shí)間和精力。
如果你與我們分享你的組織技巧讓這個(gè)帖子參考很多人就好了。別忘了提及你的網(wǎng)站和名字，因?yàn)樗鼤?huì)在你的提示下提到。