CSS 是一门条件语言

Abiee,

多年以来,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 能给你更多可能。

感谢你的阅读。