首页 > 开发 > CSS > 正文

CSS的一些编程规范总结

2024-07-11 08:30:02
字体:
来源:转载
供稿:网友

在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:

    保持 CSS 易于维护
    保持代码清晰易懂
    保持 CSS 的可拓展性

  为了实现这一目标,我们要采用诸多方法。

  本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法。
CSS 文档分析

  无论编写什么文档,我们都应当维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。
  总则

  将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为力。

  我倾向于用 4 个空格而非 Tab 缩进,并且将声明拆分成多行。
  单一文件与多文件

  有人喜欢在一份文件文件中编写所有的内容,而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。无论你选择哪种,下文的规则都将适用,而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在于目录以及区块标题:
  目录

  在 CSS 的开头,我会维护一份目录,就像这样:

CSS Code复制内容到剪贴板
  1. /*------------------------------------*/       $CONTENTS  
  2. /*------------------------------------*/   /**  
  3.  * CONTENTS............You’re reading it!    * RESET...............Set our reset defaults  
  4.  * FONT-FACE...........Import brand font files    */    

  这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。

  如果你在维护一份单文件 CSS,对应的区块将也在同一文件中。如果你是在编写一组小文件,那么目录中的每一项应当对应相应的 @include 语句。
  区块标题

  目录应当对应区块的标题。如下:

CSS Code复制内容到剪贴板
  1. /*------------------------------------*/       $RESET  
  2. /*------------------------------------*/  

  区块标题前缀 $ 可以让我们使用 [Cmd|Ctrl]+F 命令查找标题名时将搜索范围限制在区块标题中。

  如果你在维护一份大文件,那么在区块之间空 5 行,如下:

CSS Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表