为什么 CSS 那么难写？如何解决？

[toc]

你觉得难，是因为你默认使用的「关注点混合」思想，在 html 里想设计的事。你需要看一下 亚当·瓦森 的故事，我觉得他是目前从根本上解决 CSS 难写的最完美的人：

Tailwind CSS 大家都认识吧？这是目前世界上做的最火的 CSS 框架！因为它就是好用嘛。

它的作者亚当·瓦森，多年来一直提倡「关注点分离」，虽然现在 AI 生成前端很厉害了，但 CSS 依然是很难去调的部分，很多时候还是需要我们手动去改、微调，不出意外，这情况仍会持续很久。

我们可以向成功者学习，学学 CSS 大佬 亚当·瓦森 的思想，肯定会对我们写小项目时，用处不菲。首先，我们从 HTML 的 class 说起，讲讲第一个概念，语义化分离。

语义化分离

简单说，就是在 HTML 里的 class 属性中，不要写那种「设计层面」的决策，比如说 文本颜色红色、文本加粗。就像这种：

<p style="color: red;">
    错误信息
</p>
<div class="font-bold">
    加粗标题
</div>
<span class="mt-10 mb-5">
    间距元素
</span>
<table class="border-2 rounded-lg">
    表格
</table>

他的这个理想情况下的意思就是，在 html 里，我们只考虑语义，而不是最终结果的效果。HTML 本身就是一个标记语言，就是标记，硬塞 设计 的话，会混乱！

这个在 bootstrop 里就用的太多了。这也是 bootstrop 为什么维护很费脑。

亚当·瓦森 的意思是，【根据元素内容赋予类名】！

就像这种：

<header class="site-header">
    <div class="brand-container">
        <h1 class="site-title">Infographics AI</h1>
        <p class="site-tagline">Convert complex text into professional infographics instantly.</p>
    </div>
    <nav class="main-navigation">
        <ul class="nav-list">
            <li class="nav-item"><a href="#features">Features</a></li>
            <li class="nav-item"><a href="#pricing">Pricing</a></li>
            <li class="nav-item"><a href="#gallery">Gallery</a></li>
        </ul>
    </nav>
</header>

这个也是 CSS 禅意花园的思想（大家肯定认识这个站）。

只要分离关注点，那么可以实现，换个 CSS ，就能换套样式！乃至看起来是个新网站！

...

可，仅仅这样就可以了吗？渐渐你会觉得不对劲儿！

你会发现 HTML 和 CSS 依然有大量耦合，所谓 CSS ，只不过是在以 CSS 的写法镜像我们的 HTML ，维护起来依然费劲儿。

换句话，HTML 里你不关注设计了，但在 CSS 里，你既得关注设计，又得关注结构，好家伙。

怎么解决呢？

样式与结构解耦

如何能在样式设计时，不考虑结构？那就是【保持选择器特异性较低】！

可以看一下这个著名的参考站： https://getbem.com/introduction/ ！

这是 大名鼎鼎的 BEM 结构。

下面是一个使用示例：

<style>
    .author-card {
    background-color: white;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: system-ui, -apple-system, sans-serif;
    }
    .author-card__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    }
    .author-card__content {
    padding: 1.5rem;
    }
    .author-card__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.9);
    margin: 0 0 0.75rem 0;
    }
    .author-card__bio {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.6;
    margin: 0;
    }
    .author-card__bio--highlight {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    }
</style>

<div class="author-card">
  <img class="author-card__image"  src="URL"  alt="A thoughtful professional in a modern workspace" >
  <div class="author-card__content">
    <h2 class="author-card__name">Alex Morgan</h2>
    <p class="author-card__bio">
      Alex is a passionate software engineer specializing in modern frontend architectures. 
      When not advocating for <span class="author-card__bio--highlight">BEM methodology</span> 
      or building accessible web components, you can find them experimenting with new CSS features 
      or hiking with their golden retriever. They believe clean code and clean mountains 
      both contribute to a better world.
    </p>
  </div>
</div>

BEM 的解决方案是这样的：

1. 能复用的叫做【块儿】，比如 .author
2. 不能复用的叫【元素， 比如 bio，写成 .card__bio
3. 都不是的叫【修饰符】比如 highlight，写成 .card__bio--highlight

这个方式，被用的很多。

也完美解决了这个在 设计时 过度关注结构的问题。

如何处理设计得长得差不多的组件？

如果有俩组件，一个是 作者信息卡片，一个是文章预览卡片。结构几乎一模一样，CSS 基本能套用。那语义问题怎么解决，怎么命名？

解决方法一：直接复制「作者信息卡片」的 CSS 过来，改改名字。

解决方法二：用 Sass 的 @extend。

但两个都不行，前者代码重复、后者还是没解决「关注点分离」的问题。

解决方案三来了。直接分析 「作者信息卡片」和「文章预览卡片」的相同类别，建立第三个 CSS 类名，就叫 .media 。这样两个都能用对吧？！

但还是不完美。

我们现在解决了 CSS 的「重复问题」，但关注点分离依然不行。

思考关注点分离的本质

其实「关注点分离」，有可能并不是 CSS 和 HTML 的解决方案。

现在，坐下来，静下心，思考一下，问题是什么？

「关注点分离」的对立点，是「关注点混合」。

我们过去一直是后者，渐渐觉得不好用。所以思考前者，那前者就好用吗?

1. 关注点分离

优点：HTML 无法复用。

缺点：CSS 可以复用！

2. 关注点混合

优点：CSS 无法复用。

缺点：HTML 可以复用！

CSS 禅意花园采用第一种方法，而像 Bootstrap 或 Bulma 这样的 UI 框架则采用第二种方法。

其实是各有优劣哈哈！

好，那怎么才能中庸？其实做不到。

那，难道是想一下，站点的 HTML 更重要，还是 CSS 更重要吗？最后只能二选一。经过深思熟虑，CSS 显然更难写一点，那就选择 2 吧。

因为程序员肯定更喜欢写 HTML 吧。

高度可复用的类名

既然选择了走「关注点混合」的路，那就要创造一系列可复用的类名！

.card
.btn, .btn--primary, .btn--secondary
.badge
.card-list, .card-list-item
.img--round
.modal-form, .modal-form-section

在设计时，我们会发现：我们的需求越具体，那么类名越难设计。

比如在设计类名，有很多关键字是很难将其避免有「设计思想」的，就像 left right 了，元素添加间距 了。作者原文是这样说的：

这是 text-sm 还是 text-xs ？ 我应该使用 py-3 还是 py-4 ？ 我是想要 text-dark-soft 还是 text-dark-faint ？ 你不能随意选择任何数值；必须从精心筛选的列表中进行选择。 最终你得到的是 10 或 12 种文本颜色，而不是 380 种。

就这样，又无穷无尽了！

那怎么解决呢？

实用主义优先

其实，就像工厂流水线一样，从经验、从市场调研里，获取到一个最中庸的解法。

然后以实用主义优先，提取出最常用最好用的。

否则模块岂不是无穷无尽了？

根据我的经验，采用实用工具优先的方式构建设计，相比组件优先的方式，能带来更一致的外观效果，尽管这听起来可能有些反直觉。

然后 亚当·瓦森 就完善、解决模块多的问题，最后开发了一个最通用且简单的解法，并封装成了一个项目，---- Tailwind CSS ！

反正怎么说，你可以说这种办法是懒惰，套模板，但这种犀利的思维，就是解决了 CSS 难写难维护的痛点，而且是完美解决。

Tailwind CSS 现在就是世界上最火的 CSS 框架，为作者带来了 数百万，近千万美刀的财富。

这个经历，我觉得可以回答你的问题。