7 个 CSS 技巧助你保持理智

改变我的想法：CSS 很难。事实上，我每天都在强调，可扩展的 CSS 是很难有效掌握的概念之一。以下 7 个技巧可以帮助你扩展和管理 CSS 及其替代方案。

1：将建筑放在首位

为了能够有效地扩展样式，您首先需要考虑更宏伟的图景。

如果您的应用程序无法扩展，那么无论多少样式技巧都无济于事。

这里要举个流行的例子，那就是原子设计。虽然它不是唯一的范例，但它是一个很好的例子，可以让你思考如何思考应用程序的各个部分是如何组合在一起的。

原子设计的灵感来自化学，并试图从第一原理出发。由此，Brad 将设计分解为五个部分：

原子
分子
生物体
模板
页面

虽然这篇文章并没有深入探讨这个思维框架（或其他框架），但识别和隔离较小的组件与较大的组件（例如页面）将对你如何开始组织你的样式文件和避免重复大有帮助。

2：在适当的情况下使用处理器

Sass、Less和Post-CSS等预处理器和后处理器通过样式表增强您的工作流程并实现强大的模块化。

诸如在 Sass 和 Less 中嵌套之类的简单概念可以产生很大的不同，以确保您的样式不会无意中“渗透”到其他样式规则中。

例如，以下面这个简单的例子：

<div class="home-page">
  <div class="component-one">
    <div class="container">
      <p>Hello</p>
    </div>
  </div>
  <div class="component-two">
    <div class="container">
      <p>World!</p>
    </div>
  </div>
</div>

如果我们添加以下样式表会发生什么？

.container {
  background-color: #000;
}

接下来自然而然地出现了两个.container黑色背景的 div。琐碎？没错。麻烦的现实？也没错。

如果这是无意的，会发生什么？虽然这个例子本身很简单，但如果在一个大型应用中，你的类名与网站其他部分的名称相同，会发生什么？这就是无意的副作用。

即使是嵌套的基本知识也可以帮助您避免这种情况：

.component-one {
  .container {
    background-color: #000;
  }
}

.component-two {
  .container {
    background-color: #fff;
  }
}

至于像 Post-CSS 这样的工具，它能让你利用一些流行的插件，比如autoprefixer，让你彻底忘掉供应商前缀。你可以从他们网站上的基本示例中看到这个工具的强大之处：

自动前缀之前：

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

使用自动前缀处理后：

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

正如您所见，我们不再需要为浏览器的变体编写规则 - 这确实是一个最麻烦的敌人。

太棒了——我们设法节省了一些代码，并利用预处理器的基本功能避免了一些副作用，但我们仍然有点麻烦。我们仍然可能滥用这些功能，最终陷入混乱。那么接下来我们该怎么做呢？

3：找到适合你的团队的结构

有许多范例、命名约定和排序技巧可以帮助简化样式表的遍历。以下列出了其中一些：

边界元法

BEM是一种流行的类命名约定，它易于理解，能帮助你一眼就理解类的用途。这是他们主页上关于这个应用程序的介绍：

<button class="button">
  Normal button
</button>
<button class="button button--state-success">
  Success button
</button>
<button class="button button--state-danger">
  Danger button
</button>

.button {
  display: inline-block;
  border-radius: 3px;
  padding: 7px 12px;
  border: 1px solid #d5d5d5;
  background-image: linear-gradient(#eee, #ddd);
  font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
  color: #fff;
  background: #569e3d linear-gradient(#79d858, #569e3d) repeat-x;
  border-color: #4a993e;
}
.button--state-danger {
  color: #900;
}

其思想是，从来看button是块，state是修饰符，而的变体（成功/危险）是，value从而将约定引向block--modifier-value。基于偏好，BEM 的实现有很多不同的偏好， ieblock--modifier__value是另一种流行的方法。

由外而内的排序

对我来说，这是一个被严重低估的帮手。由外而内只是一种在块级作用域内描述 CSS 排序的方式。

从文章中可以看出，它旨在按以下顺序排列 CSS 属性：

布局属性（位置、浮动、清除、显示）
盒子模型属性（宽度、高度、边距、填充）
视觉属性（颜色、背景、边框、框阴影）
排版属性（字体大小、字体系列、文本对齐、文本转换）
其他属性（光标、溢出、z 索引）

请考虑以下示例，但不要考虑这一点：

.button {
  font-size: 3em;
  background: #196e76;
  display: inline-block;
  margin: 1em 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 1em 4em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 0.25em solid #196e76;
  box-shadow: inset 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.3), 0.5em 0.5em 0 #444;
}

现在将其与遵循此约定的块进行比较：

.button {
  display: inline-block;
  margin: 1em 0;
  padding: 1em 4em;

  color: #fff;
  background: #196e76;
  border: 0.25em solid #196e76;
  box-shadow: inset 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.3), 0.5em 0.5em 0 #444;

  font-size: 3em;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

对于这样一个简单的概念，当这些属性被分组为可关联属性时，后者块变得更加平易近人，并且对于开发人员体验来说是一个小小的胜利。

OOCSS、SMACSS 和 RSCSS

这三个库都可以作为风格的很好的指南和方法。

RSCSS等网站还提供了开发人员遇到的常见陷阱的很好的例子。

通过OOCSS，它引入了通用编程范例，以对象优先的思维方式来帮助实现样式的重用和组合。

SMACSS本身宣称自己更像是一个风格指南而不是一个框架，因此将其放在本节中可能是不正确的，但它无疑引出了下一个重要点。

4：使用样式指南、Linter 和代码格式化程序

Web 开发的美妙之处在于，Web 开发者是第一批为同行创造精彩资源的人！你无需“重新倒转方向”，重蹈前辈的覆辙。

风格指南是一个很好的资源，可以帮助决定您作为一个团队希望使用的规则和惯例。

Linters 可以帮助强制执行团队制定的编码约定。这有助于将规则强制执行到代码库中，并且对于新团队成员加入代码库非常有帮助。

代码格式化程序可以连接上述两者并帮助自动重新格式化样式表。

以下是一个非详尽的列表，可以帮助您开始对此进行研究：

5：考虑支持划分的框架

虽然这开始超出特定样式的范畴，但 ReactJS 等框架与 Webpack 等捆绑器相结合，使我们能够划分样式，以免影响其他样式。

举一个非常简单的例子，我们取两个分量ComponentA和ComponentB：

// ComponentA.css
.component {
  background-color: #000;
}

// ComponentB.css
.component {
  background-color: #fff;
}

// ComponentA.jsx
import "ComponentA.css"

const ComponentA = () => <div className="component"></div>

// ComponentB.jsx
import "ComponentB.css"

const ComponentB = () => <div className="component"></div>

得益于转译器的分离和强大功能，应用于两个类的样式可以彼此独立，不会发生冲突。这解决了我们之前关于“样式溢出”的问题。

6：考虑 CSS-in-JS

CSS-in-JS 是Web 开发领域中一项相对较新的技术。

我说的是最近，但即使两个月也感觉像一个时代。

诸如styled-components和Emotion JS之类的现代库将样式的强大功能引入了 JavaScript。这使我们能够轻松使用诸如应用程序主题（例如暗黑模式切换）之类的现代超能力，使我们能够使用 JavaScript 概念和数据结构来修改和维护样式，并使我们能够使用诸如静态类型之类的强大工具。

对于那些想要利用这些功能但仍喜欢最终 CSS 输出的人，请查看Treat等替代方案，它们可以让你做到这一点。

7：使用注释

这应该是不言自明的，但我有两个要求：

请使用它们。
请不要写，// HACK: my reason除非你是在对两年后继承你的数据库的某个可怜的开发人员恶作剧，或者你有非常非常好的理由这样做。

注释对于使代码更加人性化，以及用通俗易懂的语言解释正在发生的事情非常有用。它们不是借口。

结论

这些是我一路走来学到的七个技巧，可以帮助我对抗我的死敌：CSS。

希望这些资源能够帮助您对抗保持风格！

你还学到了其他什么技巧吗？快来分享吧！

资源和进一步阅读

图片来源：Jerry Wang

原帖发布于我的博客。关注我的推特@dennisokeeffe92 ，了解更多隐藏的精彩内容。

文章来源：https://dev.to/okeeffed/7-css-tips-to-save-your-sanity-2a44