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

1）縮進后代和相關(guān)規(guī)則：
這使您可以輕松地識別CSS中的頁面結(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）對CSS規(guī)則進行分組和注釋
設(shè)置CSS文件中始終存在的某些部分：頁面結(jié)構(gòu)、鏈接、頁眉、頁腳、列表等。這些部分總是CSS注釋，以適當(dāng)?shù)孛總€部分。

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）在單行線上保留樣式類型。
使用簡寫屬性將屬性組合到一行上意味著CSS更容易理解和編輯。
而不是這個：

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

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

4）把CSS分解成表格
分開你的CSS樣式表的不同部分，使用一個樣式表布局，另一個排版和另一種顏色。布局/印刷性能的混合會讓你發(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è)計師清楚他們的表的造型與全局復(fù)位，對一些元素如按鈕和字段集，被完全摧毀的全局復(fù)位的影響。相反，你應(yīng)該選擇你想設(shè)置的元素。
所以不要這樣做
*{ margin: 0; padding: 0; }

做這個

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）為參考，在一個地方的地方色彩方案。
在開始CSS文件之前，注釋一下常用的顏色并將其添加到樣式表的頂部。這樣可以節(jié)省大量的時間，并確保站點具有一個配色方案。
/* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7）使用意義命名系統(tǒng)。
擁有類和id的命名系統(tǒng)可以在更新文檔或調(diào)試時節(jié)省大量時間，可以使用父/子結(jié)構(gòu)。父容器就是容器。所以，如果我們的div命名為“頭”，和兩個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）建立一個有用的CSS類庫。
對于調(diào)試有用，但應(yīng)避免在發(fā)行版中（單獨的標(biāo)記和表示）。由于可以使用多個類名，所以可以使用它們調(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; }

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