欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

编写可维护的CSS

程序员文章站 2022-04-15 11:37:14
...
在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:
  • 保持 CSS 便于维护
  • 保持代码清晰易懂
  • 保持代码的可拓展性

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

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

CSS 文档分析

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

总则

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

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

单一文件与多文件

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

目录

在 CSS 的开头,我会写一份目录,例如:

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............You’re reading it!
 * RESET...............Set our reset defaults
 * FONT-FACE...........Import brand font files
 */

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

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

区块标题

目录应当对应区块的标题。请看如下示例:

/*------------------------------------*\
    $RESET
\*------------------------------------*/

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

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

/*------------------------------------*\
    $RESET
\*------------------------------------*/
[Our
reset
styles]





/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/

在大文件中快速翻动时这些大块的空档有助于区分区块。

如果你在维护多份、以 @include 连接的 CSS 的话,在每份文件头加上标题即可,不必这样空行。

代码顺序

尽量按照特定顺序编写规则,这将确保你充分发挥 CSS 缩写中第一个 C 的意义:cascade,层叠。

一份规划良好的 CSS 应当按照如下排列:

  1. Reset 万物之根源
  2. 元素类型 没有 class 的 h1ul
  3. 对象以及抽象内容 最一般、最基础的设计模式
  4. 子元素 由对象延伸出来的所有拓展及其子元素
  5. 修补 针对异常状态

如此一来,当你依次编写 CSS 时,每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部分,减少某些特殊的问题,组成更理想的 CSS 结构。

关于这方面的更多信息,强烈推荐 Jonathan Snook 的 SMACSS。

CSS 规则集分析

[选择器]{
    [属性]:[值];
    [- 声明 ->]
}
相关标签: 编写可维护的CSS