每个前端都应该具备的 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

以及最容易被注意到的样品分离器

1. /* -----------------------------------*/
2. /* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/
3. /* -----------------------------------*/

3）将样式类型保持在单行上

通过使用简写属性将属性组合到一行中意味着您的 CSS 将更易于理解和编辑。

而不是这个：

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

做这个：

1. 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）重置你的元素

许多设计师通过全局重置来清除工作表的样式，这会对一些元素产生影响，例如表单按钮和字段集，这些元素会因全局重置而被完全破坏。相反，您应该选择要重置的元素。

所以不要这样做

1. *{ 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 文件之前，注释您的常用颜色并将其添加到样式表的顶部。这将为您节省大量时间，并确保您的网站具有一种配色方案。

1. /* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7）使用意义命名系统。

拥有类和 id 的命名系统可以在更新文档或调试时节省大量时间，您可以使用父/子结构。父级将是容器。因此，如果我们的 DIV 命名为“header”，嵌套的两个 div 分别命名为“menu”和“logo”。css 中的命名结构将是：

1. #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; }

 

把事情简单化

无需获得比您需要的更复杂的结构。简单会节省您的时间和精力