每个设计师应有的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; }

保持简单
不需要得到比你需要的更复杂的结构。简单可以节省你的时间和精力。
如果你与我们分享你的组织技巧让这个帖子参考很多人就好了。别忘了提及你的网站和名字，因为它会在你的提示下提到。