3G Eden
RSS|
你曾经是否做过一个CSS项目，之后它变得一团混乱？我们很难追踪到是什么样式影响了HTML：一次小小的修复解决了一个问题，但又带来了三个或更多其他的问题，并且小规模的CSS改变都会打破JavaScript的功能。我们都遇到过这样的情况，然而，有些问题在项目开始构建的时候，是可以通过精心的规划来规避的。下面让我们来聊聊CSS架构吧！ 精细架构的好处精细架构的首要好处就是可扩展性。当一个项目的范围变宽或是项目的规模变大时，可扩展性将变得具有挑战性，CSS亦不例外。层叠与全局特性使得CSS强大，但也使之开发时候变得脆弱。当你发现你改了某行CSS代码修复某个东西而破坏其他代码的便利性时，你或许想头撞桌子。精细考虑能提供一下好处：
|
CSS规则的分类
|
基本样式基本样式是为默认元素而创建，是跨站点之间的默认样式。一般而言，这些覆盖到字体、盒子大小及其为兼容其他浏览器而规范化的一些等。一个常见的错误就是将基本样式定义的过于繁重且创建了一些实际不需要的默认样式。你是否有需要全局性的移除无序列表的项目符号呢，或者其他特定情况？ 对象对象就是专注于结构与布局方面的规则。装饰性的样式是不允许的。对象类的概念由Nicole Sullivan推广，旨在重新使用常用的结构或布局模式。在你的设计中发现结构模式，然后创建对象类，使之能在多个组件或站点的选择中被使用。通过将这些样式融入到类，你就可以避免冗余，以此大大缩小CSS的体积。不论自己写的还是从某框架中借来的表格系统，都融入到类的范畴吧！
|
组件
|
|
1
2
3
|
<blockquote class="c-pullquote t-light"> <p>A great quote from someone special.</p></blockquote> |
公共程序公共程序类是应用于一个特殊样式规则的单一用途助手。它们可以用于调整间距、增大字体、文字居中、清空调整、隐藏等等。公共类可以帮助你简化布局调整，比如在组件之间增加空间或者清空浮板。它们也可以用来改变已有的组件，而不需要创建一个新的组件实例。
JavaScript钩子只要有可能，在你的JavaScript和样式之间任何依赖解耦都不是问题。在样式和DOm操作的同时使用JavaScript类名会引起阻塞，让CSS重构出现问题，JavaScript依赖没有彻底清除。相反，使用类完全取决于JavaScript钩子。
命名类当给你的类命名时，要确定你的命名足够长，以便于辨别（.pullquote 不等于 .pq），但是没必要过长（.nav 而不需要 .navigation）。类名的可读性会影响整个团队成员，你必须有效帮助他们理解你所要表达的思想。 创建描述，在编写CSS时，写出有意义的名称是其中一个最头痛的问题，但如果考虑周全将会帮助很大。空间并不允许对事物命名进行深入处理，但是我们还有更多受欢迎的帖子，欢迎查看：Ethan Muller编著的Naming CSS Stuff is Really hard. |
BEM命名约定
|
|
1
2
3
4
5
6
7
|
<div class="alert alert--warning"> <h1 class="alert__title"> <span class="alert__icon"></span> Alert Title </h1> <p class="alert__description">The password you entered is invalid.</p></div> |
在你的项目中使用BEM命名约定，有如下三个主要的好处：
-
易读：使用清晰的方式描述元素的类名，将使他人更容易阅读你的HTML或者CSS文件。
-
自我描述：使用分层命名方式命名元素的类名，组件将拥有清晰的层次结构,易于知晓某个元素属于哪个组件。.
-
特异性：通常可能会过多添加一个类到你的组件中的每一个元素，如果遵循BEM约定，你能够保证你的每一个选择器的特异性低，并且覆盖更直接。
命名空间
另一个最佳实践是：当命名你的类时使用命名空间作为前缀，命名空间选择的依据是我们前边描述的类的类别。这会在你的命名前加入一些字符，但是这样做的优点在于能够立即区分每个类名的使用目的，而这在你的HTML或者stylesheets中是非常重要的.下面是我使用的命名空间：
-
Objects:.o-
-
Components:.c-
-
State:.is-OR.has-
-
Theme:.t-
-
Utilities:.u-
-
Javascript hooks:.js-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<footer class="c-footer"> <div class="o-container-wide"> <a class="c-footer__logo" href="/">The Assist</a> <div class="c-social c-social--follow"> <div class="c-social__label u-txt-center">Join the conversation</div> <ul class="c-social__list"> <li class="c-social__item"></li> <li class="c-social__item is-active"></li> <li class="c-social__item"></li> </ul> </div> <p class="c-footer__credit"></p> </div></footer> |
更多关于使用命名空间优点的内容，请查阅Harry Roberts的相关文章
代码风格
|
|
1
2
3
4
5
6
7
8
|
@import "variables";@import "mixins";@import "normalize";@import "typography";@import "headings";@import "headings";@import "layout";@import "carousel"; |
对于任何需要使用多次的值，使用变量命名。 给变量名称添加前缀，更有助于识别其用途，同时使代码自动完成功能更有用。
// Colors
$c-warning: Red;
$c-primary: Blue;
$c-background: White;
对于性质上是全局的变量，应该存储在专用变量文件中，但是其他变量只能在单个组件中使用，并且应该在使用它们的文件中定义。 在Sass中，变量可以包含在局部作用域内，而这个作用域可以位于嵌套的规则集结构体中。
|
1
2
3
4
5
|
.alert { $background-color: Red; $foreground-color: Cream; background-color: $background-color; color: $foreground-color;} |
源顺序
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@import "settings.global";@import "settings.colors";@import "tools.functions";@import "tools.mixins";@import "generic.box-sizing";@import "generic.normalize";@import "elements.headings";@import "elements.links";@import "objects.wrappers";@import "objects.grid";@import "components.nav";@import "components.buttons";@import "components.promos";@import "trumps.utilities";@import "trumps.ie8"; |
深入探究这篇文章只是对一个深入的广泛的话题的介绍，希望它能激发你对CSS项目组织和设计方式的思考。 如果你想进一步深入这个话题，请参考这篇文章中的链接，并查看以下资源和这个领域的专家的空间。
|
本文标题：合理的 CSS 架构
本文地址：https://www.oschina.net/translate/thoughtful-css-architecture
参与翻译：Tocy, imqipan, xufuji456, 混元归一, Tony
