CSS的必备工具原创邦

CSS的必备工具

CSS方法论（methodologies)
你可以不用自己写css规则，选一个已经设计好的且被多个项目验证的approach. 这些方法有非常好的机构化、编码规范、代码组织。但这些框架通常比你自己写的可能多点。但是你得到了大量结构化的css代码可以被多个系统广泛的使用。其他程序员可能理解你用他们的规则写的approach，这比理解从零开始work out自己的方法好。

OOCSS（Object Oriented CSS) [ˈɔːrientɪd] 面向对象CSS
an approach made popular by the work of Nicole Sullivan, OOCSS主要是为了拆分CSS为可复用的对象，最典型的代表例子就是The standard example of OOCSS is the pattern described as The Media Object.

media作为一个模式（样板），可以通过下面的方式来复用：

.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.media .content {
  font-size: .8rem;
}

.comment img {
  border: 1px solid grey;
}

.list-item {
  border-bottom: 1px solid grey;
}

In your HTML the comment would need both the media and comment classes applied:

<div class="media comment">
  <img />
  <div class="content"></div>
</div>

The list-item would have media and list-item applied:

<ul>
  <li class="media list-item">
    <img />
    <div class="content"></div>
  </li>
</ul>

BEM（Block Element Modifier)
比较严谨，所有显得有些繁琐。
BEM stands for Block Element Modifier. In BEM a block is a stand-alone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognize code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about BEM Naming conventions:

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

其它常见的系统 Other common systems

There are a large number of these systems in use. Other popular approaches include Scalable and Modular Architecture for CSS (SMACSS), created by Jonathan Snook, ITCSS from Harry Roberts, and Atomic CSS (ACSS), originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.

The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects. 缺点是复杂，尤其是对小项目。

构建CSS
使用工具组织css，让写css更像编程，pre-processors and post-processor带你完成样式表，需要你准备好开发环境来运行脚本处理pre and post-processing. 很多编辑器可以做到，也可以通过命令行工具完成。
最流行的pre-processor就是Sass, If you want to learn a lot more about Sass, start with the Sass basics article, then move on to their other documentation.

定义变量
现在css里面也可以自定义变量了，CSS now has native custom properties
If we created a variable called $base-color as in the first line below, we could then use it through the stylesheet anywhere that required that color.

$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}

Copy to Clipboard

Once compiled to CSS, you would end up with the following CSS in the final stylesheet.

.alert {
  border: 1px solid #c6538c;
}

后期优化 Post-processing for optimization

If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unnecessary in the production version. An example of a post-processor solution for doing this would be cssnano.

阅读量: 529
发布于: 2021-07-20
修改于: 2021-07-20