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

1）縮進后代和相關規則：
這使您可以輕松地識別CSS中的頁面結構以及如何相互關聯的部分。
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規則進行分組和注釋
設置CSS文件中始終存在的某些部分：頁面結構、鏈接、頁眉、頁腳、列表等。這些部分總是CSS注釋，以適當地命名每個部分。

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樣式表的不同部分，使用一個樣式表布局，另一個排版和另一種顏色。布局/印刷性能的混合會讓你發現你是不必要地重復自己。
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）重置元素
許多設計師清楚他們的表的造型與全局復位，對一些元素如按鈕和字段集，被完全摧毀的全局復位的影響。相反，你應該選擇你想設置的元素。
所以不要這樣做
*{ 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文件之前，注釋一下常用的顏色并將其添加到樣式表的頂部。這樣可以節省大量的時間，并確保站點具有一個配色方案。
/* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7）使用意義命名系統。
擁有類和id的命名系統可以在更新文檔或調試時節省大量時間，可以使用父/子結構。父容器就是容器。所以，如果我們的div命名為“頭”，和兩個div嵌套的“菜單”和“標志”。CSS中的命名結構如下：
#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類庫。
對于調試有用，但應避免在發行版中（單獨的標記和表示）。由于可以使用多個類名，所以可以使用它們調試標記。
1..width100 { width: 100%; }
2..width75 { width: 75%; }
3..floatLeft { float: left; }
4..alignLeft { text-align: left; }
5..alignRight { text-align: right; }

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