Maintainable CSS Semantics

zcfy

Summary: Name something based on what it is, not how it looks or behaves.

摘要: 根据 是什么 来命名， 而非 外观 或 行为。

The longer explanation

详细解释

Semantic HTML isn't just about the elements we use—it's pretty obvious that you should use a <a> for a link, a <table> for tabular data and a <p> for a paragraph etc.

语义化 HTML 不仅指我们使用的标签— 很明显, 链接要用<a>, 表格数据用<table>， 段落用<p> 等。

More importantly, it's about the class names (and IDs) we add, that provide additional hooks for CSS (and Javascript) to enhance as appropriate.

更重要的是我们添加到dom元素上的类名和id， 它们为CSS和Javascript 提供了酌情增强功能 额外的 钩子。

It's easy to add class names without thought as to their naming but naming is very important.

命名时不加思考就添加类很简单, 但是命名很重要。

“There are only two hard things in Computer Science: cache invalidation and naming things.”

— Phil Karlton

“ 在计算机科学领域，有两大难题，如何让缓存失效和如何给各种东西命名 .”

— Phil Karlton

This is because humans are good at understanding human communication and bad at understanding abbreviated, non-semantic abstractions.

因为人类善于理解人类讯息， 不善于理解简短的、非语义化的抽象。

Good and bad examples of class names

举例：好命名 && 坏命名

Try and spot the difference between non-semantic and semantic class names...

尝试指出非语义和语义化类名的区别...

<!-- bad -->
<div class="red pull-left">
<div class="grid row">
<div class="col-xs-4">

It's not clear at all what this HTML represents. You might have an idea of what these things look like (on small or large screens) but that is all.

实在看不出这段 HTML想要展现什么来。你可能猜到这些片段在各种尺寸屏幕下的展现形式，但能获知的仅此而已。

<!-- good -->
<div class="header">
<div class="basket">
<div class="product">
<div class="searchResults">

Here I know exactly what I am looking at. I know the intention of what this HTML represents. And I have no idea how it looks—that's what CSS is responsible for. Semantic class names mean something to both HTML and CSS (and JS).

我明确知道这段代码展现了什么。我知道这段HTML表示的意图，虽然并不知道它的外观—这就是CSS的职责。语义化类名对HTML、CSS、JS都有重要的意义。

So why else should we use semantic class names?
所以还有哪些别的理由让我们使用语义化类名？

Because it's easier to understand.

因为更容易理解

Whether you're looking at the HTML or the CSS, you know what you're affecting. With visual class names you end up having to sprinkle several class names on to each element, ending up with a vague understanding of the intention of these visual class names. This is hard to maintain.

无论你在看HTML还是CSS, 你知道你会影响什么。使用视觉(外观)类名的最终结果是, 你不得不在每个元素上分散使用这些类名, 理解起来也是含糊不清。这种情况很难维护。

Because we are building responsive websites.

因为我们在构建响应式网站

Styles often need changing based on viewport size. For example, you might float elements on big screens and not on small screens. So if you have a class called clearfix but you don't clear on small screens, then you now have misleading code.

基于视口尺寸的样式经常需要修改。比如, 元素在大尺寸屏幕中使用浮动布局而小屏幕中不使用。因此, 假如你有个类名叫 clearfix , 但在小屏幕中并没有清除掉, 这段代码就会产生误导性。

If you use semantic class names, then you can style them differently based on media queries making it easier to maintain.

如果你使用语义化类名, 基于媒体查询为它们编写不同的样式就方便维护多了。

Because semantic class names are easier to find.

因为语义化类名更容易被发现

If an element has classes based on how it looks such as .red, clearfix and .pull-left, then these classes will be scattered all over the codebase—so if you’re trying to hunt for a particular piece of HTML, the class name is not going to help you.

假如在元素上应用了一些基于外观的类名, 比如 .red、 clearfix 和 .pull-left, 这些类名散布在整个代码库中— 如果你正尝试寻找特定的HTML代码片断, 这些类名帮不了你。

On the other hand, if your class names are semantic, a search will find the HTML in question. Or more typically, if you're beginning your search via the HTML (think: inspecting an element) then finding unique CSS selectors based on the class name will be far easier.

另一方面, 假如你使用了语义化类名, 一次检索就能找到想要查找的HTML片断。或者更典型的, 如果你正通过HTML检索(想想: 浏览器开发者工具的检查元素), 并发现了唯一的 CSS 类选择器, 查找会变得超级容易。

Because you don't want unexpected regression.

因为不想要意外的回退

If you have utility non-semantic classes that describe the look then when you edit one of these classes, they will propagate to every single element with that class. Knowing CSS as you do, do you feel comfortable that the propagation didn't cause unexpected problems elsewhere?

假如你有一些描述外观的通用非语义化类名, 当你修改其中某个类时, 变化会扩散到每个使用这个类的元素。 如你所知的CSS, 扩散不会对其他代码产生意外影响，你觉得可能吗？

Semantic class names are unique, so when editing one, you can feel comfortable that your change only applies to the module in question as you intended, making maintainance easier.

语义化类名是唯一的，当修改语义化类名时，变动只会影响你想要修改的问题模块，维护起来更加简单。

Because you don't want to be afraid to update code.

因为不想变得害怕更新代码

Directly linked with the previous point about regression, when you don't feel comfortable touching code, you end up causing problems or being afraid to touch it at all. Therefore you end up with redundant code, increasing maintainance issues.

直接联系到前一点的回退，你不喜欢碰某些代码的结果可能是你会引发一些问题或变得更不想碰它。 随之而来的结果是冗余代码和日益增长的维护问题。

Because it helps automated functional testing.

因为它能辅助自动化功能测试

Automated functional tests work by searching for particular elements, interacting with them (typing in text, clicking buttons and links etc) and verifying based on that.

自动化功能测试的工作原理：查找到特定元素，与之交互(输入文本、点击按钮链接等)并在此基础上验证。

If you have visual class names all over the HTML, then there is no reliable way to target particular elements and act upon them.

假如HTML中遍布视觉(外观)类名，没有任何可靠的方法来定位特定元素并在此基础上进行其它操作。

Because it provides meaningful hooks for Javascript to enhance.

因为它为Javascript增强功能提供了有意义的钩子

Just like these hooks help automated testing, they are also useful to enhance behaviour with Javascript. Visual class names can't be used as a reliable way to target modules or components.

这些钩子辅助自动化测试的同时，对增强Javascript行为也大有用处。用视觉化类名来定位模块或组件并不可靠。

Because of general maintainance concerns.

因为日常维护需要

If you name something based on what it is, you won't have to touch the HTML again i.e. a heading is always a heading, no matter what it looks like.

假如使用了基于本质的命名方式，就不用再去修改HTML文件。Heading就是Heading， 不管它的展现如何。

The styling might change but you only have to update the CSS. This is otherwise known as Loose Coupling and this improves maintainability.

样式变动时只需更新CSS文件。松散耦合提升了可维护性。

Because utility classes increase noise when debugging.

因为通用类增加了调试噪音

When debugging an element, there will be several applicable CSS selectors making it noisey to debug.

调试元素时， 总会有一些CSS选择器让调试变得很困难

Because the standards recommend it.

因为标准推荐语义化

On using the class attribute, HTML5 specs say in 3.2.3.7:

HTML5规范的3.2.3.7关于类属性使用这样说：

"[...] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content."

"[...] 鼓励作者使用描述内容本质的值，而非描述内容预期展现方式的值"

Because you get a performance bump.

因为能带来性能提升?

This is a very small benefit but when you have one class name per element, you end up with smaller HTML. With visual classes you end up with multiple class names per element and that can add up.

在每个元素上只添加一个类名的结果是HTML的规模变小，这是个很小的收益。用视觉化类名的结果是每个元素上都有好多类名，而且还会增长。

Because it adheres to the reuse rule.

因为它秉承复用准则

If you don't use semantic class names, then you will likely be breaking the rules of reuse. Read the next chapter to find out more.

如果不使用语义化类名，很有可能违反复用准则。下一章节会有详细介绍。

Why? Because visual class names might declare the same property!

It's likely that several different utility classes could refer to the same property meaning order matters and performance degrades.

Think of an example of this.

为什么？因为视觉类名可能声明了相同的属性!

不同的工具类很可能引用了同一个CSS属性, 结果由引用的顺序决定, 同时性能也会降低。
想想这样的例子。

Final thoughts about semantics

关于语义化的最后思考

Semantic class names are a corner stone of MaintainableCSS. Without this, everything else makes little sense. So name something based on what it is and everything else follows.

语义化类名是 MaintainableCSS 的基础之一。没有它，其它的都没有意义。按照本质命名吧，剩下的都按照这个规则来。