CSS 101

1. Hello CSS
2. CSS语法
3. 选择器
4. 盒模型
5. 背景和边框
6. 文本方向和内容溢出
7. 值、单位和大小
8. 特殊元素
9. 布局
10. Flex 布局
11. Grid 布局
12. 定位布局
13. 响应式设计
14. 动画与过渡
15. 预处理器
16. 开发者工具
17. 代码规范
18. Uniswap页面
.
代码规范

这一讲,我们介绍如何在编写时保持代码规范,从而使一个更大的样式表和大项目具有更强的可读性和可维护性。

保持统一

如果你开始为项目指定规则或者独自工作,那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用,例如对类使用相同的命名常规,选择一种描述颜色的方式,或者维护一个统一的格式化方式(例如你是使用Tab还是空格来缩进代码?如果是空格,用多少个?)

一直遵守一系列规则,你会在编写 CSS 的时候省去不少精神上的预负担,因为一些决定已经定型了。

将CSS格式化成可读的形式

你可以看到很多 CSS 格式化的方式,一些开发者将所有的规则放在一行里面,像是这样:

.box { background-color: #567895; }
h2 { background-color: black; color: white; }

还有的开发者更喜欢将所有的东西放在新的一行:

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}

CSS 不会管你使用哪种方式来进行格式化,我们的看法是,将每个属性值对放在新的一行会更好读。

为你的CSS加注释

在你的 CSS 里加入注释,不仅可以帮任何未来的开发者处理你的CSS文件,也可以在你离开项目一段时间后,帮你在回来时更轻松地重新上手。

/* 这是一条 CSS 注释,
它可以分成好几行。*/

在你的样式表里面的逻辑段落之间,加入一块注释,是个好技巧。在你快速掠过的时候,这些注释可以帮你快速定位不同的段落,甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串,你可以从段落到段落间跳转,只需要搜索一下,下面我们用的是||。

/* || General styles */

...

/* || Typography */

...

/* || Header and Main Navigation */

...

你不必在你的 CSS 中给每个东西都加上注释,因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。

为了对旧浏览器保持兼容,你用某种特殊方法使用了一种 CSS 属性,示例:

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}

在你的样式表里面加入逻辑段落

在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外,所有将会广泛生效的样式。典型地,你可以为以下的元素设定规则:

  • body
  • p
  • h1,h2,h3,h4,h5
  • ul和ol
  • table属性
  • a

在这段样式表里面,我们提供了用于站点类型的默认样式,为数据表格、列表等设立了一份默认的样式。

/* || GENERAL STYLES */

body { ... }

h1, h2, h3, h4 { ... }

ul { ... }

blockquote { ... }

在这段之后,我们可以定义一些实用类,例如一个用来移除默认列表样式的类,我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西,那么你可以把它们加到这里。

/* || UTILITIES */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

...

然后我们可以加上在整个站点都会用到的所有东西,这可能是像基础页面布局、抬头或者导航栏样式之类的东西。

/* || SITEWIDE */

.main-nav { ... }

.logo { ... }

最后我们可以在 CSS 里面加上特指的东西,将它们分成上下文、页面甚至它们使用的组件。

/* || STORE PAGES */

.product-listing { ... }

.product-box { ... }

通过使用这种方式排布代码,我们至少能大致了解,我们能在样式表的哪个部分寻找想要更改的东西。

避免太特定的选择器

如果你创建了很特定的选择器,你经常会发现,你需要在你的 CSS 中复用一块代码,以将同样的规则应用到其他元素上。例如,你也许会有像是下面的选择器那样的代码,它在带有main类的<article>里面的带有box类的<p>上应用了规则。

article.main p.box {
  border: 1px solid #ccc;
}

如果你之后想要在main外的什么地方上应用相同的规则,或者在<p>外的其他地方,你可能必须在这些规则中加入另一个选择器,或者直接新建个规则。或者,你也可以建立一个名为box的类,在任何地方应用。

.box {
  border: 1px solid #ccc;
}

将东西设置的更为特定,有时也有意义,但是这一般与其说是通常实践,倒不如说是例外。

总结

这一讲我们介绍了在编写时如何保持代码规范,并给出了相应的示例。对一个前端开发人员而言,代码编写规范是一个十分重要的素养。

PreviousNext