如何组织你的css 原创邦

如何组织你的css

当你做大项目，需要些很多css代码，你会发现维护一个大的css文件需要费点功夫。

为了便于维护css，这里介绍一些css文件的最佳实践，

1.你的项目有代码样式指南吗？Does your project have a coding style guide?
如果你小组的项目里面工作，第一件事就是检查项目的CSS编码样式指南。团队的样式指南胜过你个人的喜好。做事的方法往往没有对错之分，重要的是要统一。
MDN的CSS指南：https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS

2. 风格保持一致
如果你开始设置项目的规则或者一个人干，最重要的是保持一致，一致性包括很多方面，比如：类命名习惯，选中一个方法的描述颜色，或者维护一致的格式（tab或者空格，多少个空格或者tab用于缩进）。拥有一组规则，并遵循这个规则会减少写css的精神开销，因为你已经决定一些规则。

3.代码备注
帮助他人理解，也帮助自己以后更容易读懂。给某一块逻辑代码加上备注

/* || General styles */

...

/* || Typography */

...

/* || Header and Main Navigation */

...

还有些特别的原因需要备注，比如兼容老旧的浏览器：

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

4. 样式表里面的逻辑
按照常用性为顺序来写样式，比如：

body
p
h1, h2, h3, h4, h5
ul and ol
The table properties
Links

In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.

/* || GENERAL STYLES */

body { ... }

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

ul { ... }

blockquote { ... }

接着定义utility classes,比如

/* || UTILITIES */

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

...

再接着定义站点通用样式，比如布局相关的头尾导航样式等。

/* || SITEWIDE */

.main-nav { ... }

.logo { ... }

最后定义一些特别的东西，按照上下文、页面或组件来区分的用到的样式。

/* || STORE PAGES */

.product-listing { ... }

.product-box { ... }

5. 避免过度使用选择器
如果你创建了非常详细的选择器，你可能需要到处去复制他们。

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

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

有时候做一些特别具体的选择器是必须的。

6. 大的样式表拆分成多个小的。

阅读量: 556
发布于: 2021-07-19
修改于: 2021-07-19