首页 > 程序开发 > web前端 > HTML/CSS >

CSS进阶( Leveling up in CSS)


CSS起初看咋看很简单,毕竟它只是样式而已,对吗? 但是,给点时间,很快CSS就要向你展示它的复杂性的真实深度。 在大规模使用CSS的时候有保持理性,有一下四个方面的事情可以去做

CSS seems easy at first. After all, it’s just styling, right?
But, give it time. Soon, CSS will show you the true depths of its complexity.
There are four things you can do to stay sane while using CSS at scale: use proper semantics, modularize, adopt a naming convention, and follow the single responsibility principle.

在大规模使用CSS的时候有保持理性,有一下四个方面的事情可以去做: 适当的语义化模块化采用一种命名约定并遵循单一责任原则

1、适当的语义化( Use proper semantics)

在HTML和CSS中有语义标记的概念。 语义意味着单词和意义之间的关系。在HTML的环境中,意味着使用适当的标记,这有个经典的例子:

<!-- bad -->
<div class=”footer”></div>
<!-- good -->

Semantic HTML is pretty straightforward. On the other-hand, semantic CSS is much more abstract and subjective. Writing semantic CSS means choosing class names that convey structural meaning and function. Come up with class names that are easy to understand. Make sure they aren&rsquo;t too specific. That way, you can reuse your classes.

语义的HTML相当的简洁明了,另一方面,语义化的CSS相当的抽象并且主观。 写语义化的CSS时候意味着传达结构上的意义和职责,提出一种便于理解的类名。确保它不是很具体,这样你就可以重用你的类名。


<div class="stream">
  <div class="streamItem">
    <article class="postArticle">
      <div class="postArticle-content">
        <!-- content -->

From the code, you can immediately discern structure, role, and meaning. The parent class is stream, a list of articles. The child class is streamItem, an actual article within the list. It&rsquo;s clear how parent and child relate to one another. Furthermore, those classes are used on every page that features articles.

从上面的代码中,能够立即看清楚结构,角色,和意义。 父类是stream,是一个文章列表,子类是streamItem,是一个在列表之内的文章。父类和子类的关系很清楚。而且这样的类可以在任何有文章的页面中使用。
You should be able to read HTML and CSS like a book. It should tell a story. A story has characters and relationships between them. More semantic CSS will ultimately make your code more maintainable.

For further reading, check out What Makes for Semantic Class Names ,Naming CSS Stuff is Really Hard, and Semantics and Sensibility. For a longer read, see About HTML semantics and front-end architecture.


进阶阅读,请挪步 怎样语义化类名, 命名CSS这玩意真的好难,和 语义化和识别能力。较长的阅读 ,请挪步 关于HTML的语义和前端构架。


In the age of component-based libraries like React, modularization is king. Think of components as composable modules created by deconstructing interfaces. Below is Product Hunt&rsquo;s front page stream. As an exercise, let&rsquo;s break the stream down into various components.
Each colored outline represent a component. The stream has many stream items.
每一个颜色轮廓代表一个组件,这个流包含许多流项目。<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">

Most components can be broken down into even smaller components.
Each stream item has a thumbnail and information about a featured product.



Because the stream component is independent of its children and vice versa, you can easily adjust or switch out the post class without making significant changes to the stream class.
Thinking in components will help you make your decouple code. The more decoupled your code is, the lower the interdependence between your classes. This makes your code easier to modify and work with in the long run.

考虑组件可以帮助使你的代码解耦。 解耦的程度越高,你的类之间的互相依赖就越低。 这样能够使你的代码容易修改并且长期运行。

When modularizing your CSS, start off by breaking your design down into component. You can do this with paper and pencil or in a program like Illustrator or Sketch. Identifying components will give you an idea of how to name your classes and how they relate to one another.

To read more about component driven CSS, check out CSS Architectures: Scalable and Modular Approaches, Writing Modular CSS with Sass, and Modularizing Your Front-End Code for Long Term Maintainability and Sanity.

当模块化CSS的时候,开始把你的设计拆分成组件,你可以用你的纸和笔或者使用像 Illustrator or Sketch 这样的软件,组件将会给你一个怎样去命名你的类并且它们之间如何联系的一个思路。

更多关系组件化驱动CSS的文章请移步 CSS架构-可伸缩和模块化的方法, 用SASS写模块化的CSS,为长期的维护和合理健全模块化你的前端代码。

3、选择一个好的命名约定(Choose a good naming convention)

There are dozens of CSS naming conventions out there. Some people swear by their choice of convention, claiming theirs is better than others. In truth, the best naming convention is different for each person. The best advice I ever received on this is: choose the naming convention that makes the most sense to you.
Here is a short list of some of the naming conventions people use:

Object oriented CSS OOCSS Block element modifier (BEM) Scalable and modular architecture for CSS (SMACSS) Atomic

One of my favorite naming conventions is BEM. BEM stands for block, element, and modifier. Yandex, the Russian equivalent of Google, came up with it to issues they had with their CSS codebase at scale.

选择一个靠谱的命名约定(Choose a good naming convention)


面向对象的CSS OOCSS 块级元素修饰 (BEM) CSS的可扩展和模块化构架 (SMACSS) 原子性

一种我最喜欢的命名约定是BEM,BEM 代表块,元素和修饰。 Yandex,俄罗斯人的Google,他们在处理自己那种规模的代码库时候想出来的解决方案。

BEM is one of the simplest — yet strictest — of the naming conventions.

.block {}
.block__element {}
.block--modifier {}

Blocks represent higher level classes. Elements are children of blocks. And modifiers represent different states.


In the example above, the class search is the block and search button is its element. If we want to modify the state of the button, we can add a modifier like active .
One thing to remember about naming conventions is that regardless of which CSS naming convention you prefer, you will often times inherit or work on codebases with different standards. Be open to learning new standards and alternative ways of thinking about CSS.
You can read more about BEM in Getting your head &rsquo;round BEM syntax , BEM 101 , and Intro to BEM . For general reading about different conventions, check outOOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
关于BEM的更多的阅读 开始了解BEM的语法,BEM101, BEM简介。关于不同的约定一般阅读, OOCSS,ACSS,BEM,SMACSS 他们是什么? 我应该用哪个?

4、 遵循单一责任的原则 (Follow the single responsibility principle )

The single responsibility principles states that every module or class should have responsibility over a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class.
Within the context of CSS, the single responsibility principles means that pieces of code, classes and modules should do only one thing. When applied to CSS file organization, this means that self-contained components like carousels and navigation bars should have their own CSS file.

单一责任原则指出每一个模块或者类都应该对一个支持软件功能的一个单一部分负责,这种责任应该完全被封装在类中。在CSS的上下文环境中,单一责任原则意味着一个代码片段,一个类,或者一个模块应该做一件事情。 当应用于CSS的组织的时候,这代表独立的组件,像导航栏和轮播应该有他们自己的CSS文件,就像下边这样的:
Another common pattern in file organization is grouping files by functionality. For example, in the snippet above, all the files related to the carousel component are grouped together. Adopting this approach makes finding files much easier.
In addition to separating component styles, it&rsquo;s good to separate global style using the single responsibility principle.

另外一种组织文件的普通的模式是将文件按照功能分组。举个例子,在上面的代码片段中,所以的和轮播相关的文件组织在一起。 采用这样的方法使得查找文件变得相当简单。
In the example, each style concern is separated into its own file. This way, if you want to update your colors, you know exactly where to look.
Regardless of which file organization convention you use, let the single responsibility principle help guide your decisions. If one file starts getting bloated, consider partitioning it out based on what makes logical sense.
For more on file structures and CSS architecture, read Aesthetic Sass 1: Architecture and Style Organization and Scalable and Maintainable CSS Architecture.
When the single responsibility principle is applied to individual CSS classes, it means that each class should have only one function. In other words, separate out styles into different classes based on concerns. Here is a classic example:
更多的关于文件结构和CSS架构,阅读 审美SASS, 架构和组织CSS和可伸缩以及可维护的架构风格。


.splash {
  background: #f2f2f2;
  color: #fffff;
  margin: 20px;
  padding: 30px;
  border-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

In the example above, we are mixing concerns. The splash class not only contains presentation and styling logic for itself, but for its children as well. To remedy this, we can split the code into two separate classes.

.splash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

.splash__content {
  background: #f2f2f2;
  color: #fffff;
  padding: 30px;
  border-radius: 4px;

Now we have a splash and splash content. We can use splash as a generic full-bleed class that takes any child. All of the concerns of the child, in this case the splash content, are decoupled from the parent.
现在我们有slash和splash__content 我们可以使用splash作为一个普通的可以容纳任何子类的类,所有与子类有关的特性,在这个例子中与父类完全解耦。

You can read more about applying the single responsibility approach to styling and classes in The single responsibility principle applied to CSS and Single Responsibility.
可以阅读更多关于采用单一责任的方法书写样式和类的文章 The single responsibility principle applied to CSS and Single Responsibility.

简单超越复杂(Simplicity over complexity)

Ask any good front-end developer or CSS architect and they will tell you that they&rsquo;ve never been fully satisfied with their code. Writing good CSS is an iterative process. Start simple, follow basic CSS conventions and style guides, and iterate from there.
If you enjoyed this article, you might like the article I wrote that teaches you five important characteristics of good design through k-pop.
I would love to know how you approach CSS. What is your favorite naming convention? How do you organize your code? Feel free to leave a note or Tweet to me.

去问任何好的前端开发者或者CSS架构师,他们会告诉你他们从来没有真正的对自己的代码完全满意过。 编写好的CSS是一个反复迭代的过程,从简单的开始,遵循基本的CSS约定和风格指南,并从那里开始迭代。