编写好的 CSS

已发表: 2016-10-17

我一直在努力学习新事物。但是，我也尝试学习如何改进我已经做事的方式。在我的全职演出和客户端项目中，我一直想要改进的是我的 CSS。在谈到 CSS 时，我一直觉得自己非常出色，但我一直觉得它读起来很乱，而且通常很难维护。

我一直在尝试做的是找出什么是好的、可读的、可维护的 CSS。我想我已经想出了（并找到了）一些使这一切成为可能的方法。

问题

关于 CSS，有几件事困扰着我。我最常见的烦恼是：

重复公共代码
浏览器前缀
缺乏评论
超过合格的选择器
糟糕的班级名称

当涉及到我的个人项目时，我对我的代码负全部责任。我很少评论我的 CSS，并且经常将其视为事后的想法。那是错误的。

很长一段时间以来，我认为我的类名是“语义的”，只是我在做事，所以没有必要解释代码，或者小“黑客”或任何东西。

回到一个长期项目的代码很快证明这个理论是非常错误的。

当谈到工作中的代码时，我不能承担所有责任。事实上，部分问题在于参与其中的人数。目前，我们的团队中有 7 人曾在某个时候为我们的网站编写过 CSS，另外 6 到 8 人来来往往年。团队中的每个成员都有不同程度的 CSS 知识和能力。

同样，与长期项目的情况一样，一些代码是旧的。其中很多是 CSS3 之前的版本，或者是 5 年前的任何流行趋势。在这两种情况下，写作时通常有不同的做事方式，在某些情况下，自然缺乏知识。

我还了解到，一些程序员会坚持认为他们的代码是“自我记录的”。如果你不熟悉这个术语，它的意思是“我的代码没有注释”。

解决方案

虽然没有什么是完美的，但我相信我们可以做一些事情来改进我们的代码。不久前，我发现了 Harry Roberts 的 CSS 指南。 Itt 信守“编写健全、可管理、可扩展的 CSS 的高级建议和指南”的承诺。

注释

虽然 CSS 指南给出了评论样式的具体细节，但我个人只是尝试加入一些东西来告诉我未来我的想法。我以一个代表标题的注释开始每个组件，它们详细说明了组件的意图。

使用预处理器时，我将特定注释设置为包含在 CSS 中或被预处理器跳过。我还在这部分工作，并试图养成放东西的习惯，任何东西。

面向对象

面向对象是一种将大事分解成小事的编程范式。来自维基百科：

面向对象编程 (OOP) 是一种编程范式，它代表“对象”[…] 的概念，它们通常是类的实例，[并且] 用于相互交互以设计应用程序和计算机程序。

说到 CSS，我们称之为面向对象的 CSS，或OOCSS 。基本概念将元素的结构与元素的皮肤分开。这意味着我们可以轻松地重用任何重复出现的设计模式，而不必同时重用特定的实现细节。 OOCSS 非常注重代码的重用，这使我们更快，并且可以减小代码库的大小。

我想到了骨骼等结构方面；提供称为object的构造的通用框架。这些对象是简单的设计模式，没有任何化妆品。我们从一组组件中抽象出结构以获得通用对象。

然后，我们可以选择将“皮肤”层添加到我们的结构中，以便我们可以为抽象赋予特定的外观和感觉。例如（取自 CSS 指南）：

 /**
 * 一个简单、无设计的按钮对象。 使用 `.btn--*` 皮肤扩展此对象
 * 班级。
 */
.btn {
    显示：内联块；
    填充：1em 2em；
    垂直对齐：中间；
}

/**
 * 正面按钮的皮肤。 扩展`.btn`。
 */
.btn--阳性{
    背景颜色：绿色；
    白颜色;
}

/**
 * 负按钮的皮肤。 扩展`.btn`。
 */
.btn--负{
    背景颜色：红色；
    白颜色;
}

在这里，我们看到.btn类如何简单地为元素提供结构，但与装饰无关。我们可以使用第二个类扩展.btn ，例如.btn--positve以赋予该元素更具体的样式：

 <button class="btn btn--positive">确定</button>

我更喜欢在我的 HTML 中使用多个类，而不是在预处理器中使用@extend类的东西。这让我在我的 HTML 中有更多的可见性，让我可以快速查看哪些类应用于我的元素。这也意味着我的类没有与我的 CSS 中的其他样式紧密绑定。它有助于 OOCSS 遵循封装的概念。

边界元法

BEM （块、元素、修饰符）是 Yandex 开发的一种前端方法。 BEM 实际上是一个非常完整的方法论，老实说我还没有深入研究所有细节，但我关心的只是命名约定。

我正在使用类似 BEM的命名约定。概念是相同的，但确切的语法可能略有不同。

BEM 将课程分为三组：

块：组件的根或基
元素：块内的组件
修饰符：块的变体或扩展

一个非常基本的类比（不是示例）：

 。狗 {}
.dog__tail {}
.dog--小{}

元素用两个下划线 (__) 分隔，修饰符用两个连字符 (-) 分隔。

在上面的类比中，我们看到.dog是块，元素的根。然后， .dog__tail是一个元素，它是.dog块的较小部分。最后， .dog--small是修饰符，是.dog块的特定变体。您还可以将修改器应用于元素。例如，我们可以再次使用.dog__tail--short来指定dog__tail元素的变体。

在某些情况下，我可能需要多个词来表示块、元素或修饰符。在任何情况下，这些都用一个连字符 (-) 分隔，并且类总是用小写字母书写。

预处理器

我一直在花时间在我的工作流程中使用 CSS 预处理器，到目前为止，它非常有价值。 CSS 预处理器采用预处理语言编写的代码并将它们转换为良好的旧 CSS。它们不是CSS，这意味着它们不受 CSS 的相同规则和限制的约束。虽然 CSS 很棒，但它并不总是能让我们轻松地做我们想做的事情。

例如，在 CSS 中非常棒的一件事是variables 。也许您希望某个元素的左边距与另一个元素的宽度相同，突然有人决定这些数字需要更改。由于它们是相同的数字，并且您的布局可能依赖于该数字，因此您必须更改多个位置。但是使用变量，您可以只在一个地方更改它并让它反映在整个布局中。当然，预处理器不仅仅是变量，还有很多，但这是一个开始！

您显然不必使用预处理器，但我认为您会发现大多数使用预处理器的人不会回去。我知道我不会。灵活性的提高和可读性的提高是我不能放弃的。仅仅能够使用变量和 mixins 就足以让我着迷。

有几个可用的预处理器，但我真正看过和使用过的只有两个是LESS和SASS 。请看一下，并考虑将其中一个添加到您的工作流程中，您将不会回头。

结束语

我的真正观点是，CSS可以更好。一切都可以变得更好。最近有人在 Reddit 上的一篇帖子的评论中告诉我“CSS 没有语义”。我完全不同意。毫无疑问，CSS 100%可以是语义化的。

事实上，使用 OOCSS 和 BEM 确实为您的 CSS 赋予了非常语义化的含义。这并不意味着它一开始就很容易，但它非常值得探索。将其与 CSS 预处理器结合起来，您就有可能获得非常易读、可维护和可扩展的 CSS 。

我还想指出，这不仅使您的 CSS（无论是否经过预处理）更具可读性，而且通过将语义类名称应用于元素，还使您的 HTML 更具可读性。

TL;博士

好吧，也许这很多——总而言之，通过这样做来编写更好的 CSS：

面向对象的 CSS ：

每个班级都做一件事——做得好，做得对

块、元素、修饰符 (BEM) 样式类名称：

块： .grid
元素： .grid__item （2 个下划线）
修饰符： .grid--wide （2 个连字符）

预处理器很棒：

看看它们：LESS – SASS
或查找其他：8 个 CSS 预处理器以加快开发时间