CSS 是一门条件语言

多年以来，CSS 被认为是设置网页样式的方式之一，它的润色工作一直做得很优秀，网页也变得越缺它不可。

它很强大，却也遭受口角：CSS 没有条件表达式。确切地说，是 CSS 不支持 if…else 表达式。这不代表 CSS 不是一门条件式语言。

@media (min-width: 768px) { ... }

上面语句令你回忆起什么？曾几何时，我们在构建响应式网页的时候，对此可不陌生，它表示当屏幕尺寸大于等于 768px 的时候，会怎么怎么样。这就是 CSS 的条件语句，不同于其它计算机语言，CSS 不使用 if…else 关键词，它有自己的表达方式，这些特征在近些年变得越发明显：上述语句在媒体查询 4 级规范可以写作：

@media (width >= 768px) { ... }

CSS 的诸多伪类也是条件语句，如 :hover, :active, :focus, :disabled 等常见伪类，还有近两年新增的函数伪类。有关函数伪类，我还不是特别熟练，就不过多介绍，值得一提的是，它们之中大多数都要求 Chrome >= 88，如果你是面向微信用户构建的产品，那么不宜使用它们。

此外，我还想介绍 CSS 的 min(), max(), clamp() 函数，它们在构建现代响应式布局中非常有用（放心，你可以大胆的在微信浏览器中使用）。在过去，我们给网页设置 container 容器通常是如下做法：

.container {
    max-width: 1200px;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}

在使用 min() 函数之后：

.container {
    min: (100% - 64px, 1200px);
    margin-left: auto;
    margin-right: auto;
}

是不是感到兴奋，min() 函数用来约束最大值，它模仿以下逻辑：

if ((viewPortWidth - 64px) > 1200px) {
    containerWidth = 1200px;
} else {
    containerWidth = viewPortWidth - 64px;
}

非常酷！😎 max(), clamp() 函数就留给大家自行探索。

我喜欢使用 CSS，它就像一种魔法，它允许我通过条件特性去给产品做设计决策，用于尝试和设计理念，构建出精美的用户界面。即便在 UI 组件库百花齐放的今天，我也认为前端从业人员应该多关注 CSS。组件库不是万能的，CSS 能给你更多可能。

感谢你的阅读。