CSS 编程规范总结:易于维护、清晰易懂、可拓展

0 下载量 125 浏览量 更新于2024-08-28 收藏 151KB PDF 举报
CSS编程规范总结 在参与规模庞大的、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 1. 保持 CSS 易于维护 2. 保持代码清晰易懂 3. 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法。本文档将探讨语法、格式以及分析 CSS 结构,并围绕方法论、思维框架以及编写与规划 CSS 的看法。 语法规范 1. 统一的风格:无论编写什么文档,我们都应当维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。 2. 行宽控制:将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为力。 3. 缩进方式:我倾向于用 4 个空格而非 Tab 缩进,并且将声明拆分成多行。 文件组织 1. 单一文件与多文件:有人喜欢在一份文件文件中编写所有的内容,而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。 2. 目录维护:在 CSS 的开头,我会维护一份目录,就像这样: ``` /*————————————*\ $CONTENTS \*————————————*/ / * CONTENTS…………You’re reading it! * RESET……………Set our reset defaults * FONT-FACE………..Import brand font files */ ``` 这份目录可以告诉其他开发者这个文件中具体含有哪些内容。这份目录中的每一项都与其对应的区块标题相同。 区块标题 1. 目录应当对应区块的标题。如下: ``` /*————————————*\ $RESET \*————————————*/ ``` 区块标题前缀 $ 可以让我们使用 [Cmd|Ctrl]+F 命令查找标题名时将搜索范围限制在区块标题中。 2. 如果你在维护一份大文件,那么在区块之间空 5 行,如下: ``` /*————————————*\ $RESET \*————————————*/ [Our reset styles]/*————————————*\ $FONT-FACE \*————————————*/ ``` 其他规范 1. 注释规范:在编写 CSS 代码时,我们应当使用统一的注释风格。 2. 命名规范:在命名 CSS 选择器时,我们应当使用统一的命名规范。 3. 可维护性:我们应当保持 CSS 代码的可维护性,使其易于理解和修改。 遵守这些规范可以提高我们编写 CSS 代码的效率和质量,使我们的代码更加易于维护和拓展。