在这里，我并不想评论 CSS 框架和库的好坏，但一个不争的现实就是，很多 Web 开发者很容易在众多的 CSS 框架库中迷失方向。甚至，每个框架和库都向 Web 开发者承诺，将提供更简单的样式和更流畅的 Web 布局。然而，在当下，现代 CSS 特性 提供了更简单和更灵活的方法，你完全可以不依赖任何 CSS 框架库就能构建出你想要的 Web 布局效果！

当下的现实就是，大部分 Web 开发者过度依赖各种框架，包括 CSS 方面的框架或库，来处理样式上的事情，其中就包括为 Web 网站或应用构建布局。尽管通过配置框架可以实现我们所需的功能，但试问你有多少次仅仅为了实现 Web 布局而整合整个 CSS 框架或库呢？我相信我们当中有许多人在某个时刻都这样做过，甚至现在依旧还在这样做。

今天，我想通过这篇文章告诉大家的是，现代 CSS 提供了很多优秀的特性，它们可以为 现代 Web 布局 提供更好、更灵活的布局方案，你完全无需仅为布局而使用框架。而且这些特性，将为你对 Web 布局获得更大的控制权。

Web 布局一直以来对于众多 Web 开发者来说是具有一定的挑战性，但随着 现代 CSS 特性 的出现，这些挑战逐渐变得越来越没有难度。甚至包括很多 创意性布局和异形布局 ！

接下来，我们将会探讨如何使用现代 CSS 特性为 Flexbox 和 Grid 布局提供更强大的便利性，例如流体布局和重复布局。在这个过程中，我将整合 CSS 容器查询，使这些布局根据自身的大小而不是视窗大小进行响应，与此同时，还将应用 CSS 级联层特性，进一步允许你控制样式，防止样式发生冲突。

这意味着，你需要对现代 CSS 的一些特性有一定的认识，易于帮助你更好的阅读和理解下面的内容。如果你对现代 CSS 特性不怎么熟悉，那么个人强烈建议你购买我的小册——《现代 CSS》，它将将使你深度掌握 CSS 各种最新特性。

有效利用 CSS 级联层和变量特性
使用过 CSS 框架或相关方法论的开发者，对于 CSS 级联层和变量这两个概念不会感到陌生。因为大多 CSS 框架都会使用它们来管理和维护 CSS 。例如，ITCSS ，它就以下图这样的方式来管理 CSS：
如今，不需要这么麻烦了，我们可以使用 CSS 的 @layer 规则 来管理 CSS。这个特性不仅可以使样式整洁有序，还允许我们通过按特定的顺序组织这些层来影响每个层的权重。这些使我们创建的 CSS 更易于维护，并可以轻松地集成到你的项目中，而且还不会遇到样式权重的冲突。
在我们今天要聊的内容中，我认为以下三个层足够了：
@layer reset, theme, layout;
排列在前面的层，其权重越低。因此，我把 reset 层排在第一，使其成为所有层中权重最低的一层；layout 层排在最后，使其权重最高，优先级高于其他两个层中的样式。
注意，如果我们添加一个没有层级的样式，它将被统一放置在一个名叫匿名层中，其权重是最高的。
说实话，我现在恋上了这个级联层规则，不管是在平时的项目中，还是在 Codepen 写案例，我都习惯性的使用它来组织我的 CSS 代码。
非常遗憾的是，今天的主题并不是聊 CSS 的级联层，因此我无法使用更多的篇幅来向大家阐述它。如果你想深入的了解她，请移步阅读《CSS 分层：@layer》一文。
既便如此，还是要花点时间来聊聊这三个层在工作中应该如何使用。
reset 层比较好理解，这个层将包含我们希望“重置”浏览器样式的样式，比如你项目中的 reset.css 和 normalize.css 文件中的代码就可以放在这个层中。当然，你也可以使用之前的方式，通过单独的样式文件来“重置”浏览器默认样式。但需要记住，在引入样式文件时，要是没有使用级联规则 @layer 定义它的层级顺序，它将会被认为是匿名层级，具有最高的权重。这种情况之下，很有可能会给你造成一定的困惑。
不过，我个人习惯性喜欢在 reset 层中，使用简单“重置”样式，例如：
@layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } }
这种方式简单且粗暴，有时候也会使你为其他元素添加不少样式。比如，为 p 、h1 ~ h6 等元素设置 margin 等。因此，你需要根据自己的习惯和项目环境，配置比较合适的“重置”样式。
接下来是 theme 层。从其名应该大致知道这个层的作用。是的，它就是用来设置与主题相关的样式，例如、颜色、间距等属性。在这里，我们在 :root 中定义一些与布局相关的 CSS 变量。例如：
@layer theme { :root { --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 3vmax; --layout-default-ram-size: min(100% - 2rem, 300px); } }
我习惯性在 :root 上定义这些与布局相关的变量，因为布局容器通常是许多其他元素的包装器，全局作用域可以确保变量在我们想要用的地方都可以被引用。不过，如果需要，也可以将这些变量作为局部变量，用于指定的元素上。
注意，上面的演示代码，其中 layout- 前缀只是用于标识，这些变量是用于布局上的，你可根据自己的喜好来调整，比如使用一个简写的 l- 来表示。我更想说的是，虽然只是几行简短的示例代码，但它包含多个现代 CSS 特性：

CSS 自定义属性，也俗称 CSS 变量，它是以 -- 为前缀定义变量名称，然后通过 var() 函数来引用。有关于这方面更详细的介绍，可以移步阅读《CSS 自定义属性你知道多少》和《CSS 自定义属性可以用来做些什么》

ch 和 vmax 都是现代 CSS 中相对单位，其中 ch 是字体相对单位，vmax 是视窗相对单位。除此之外，还新增很多相对单位，比如 cqw 、lh 等。有关于这方面更详细的介绍，可以移步阅读《现代 CSS 中的相对单位》

min() 函数是 CSS 的比较函数，与其同时出现的还有 max() 和 clamp() 函数。这三个函数在现代 Web 布局中非常有用。例如，min() 函数，将会根据提供的参数列表中返回最小的值。有关于这方面的介绍，可以移步阅读《CSS 的比较函数：min() 、max() 和 clamp()》

ram，它更专业的写法是大写的，即 RAM 。它表示的是现代 Web 布局中的一个经典布局技术。利用 CSS Grid 布局中的 repeat() 和 minmax() 函数以及 auto-fit 或 auto-fill 属性实现自动换行布局（注意，不是文本换行）

是不是信息量有点爆棚！

作者：大漠_w3cpluscom
链接： https://juejin.cn/post/7377355452890726409
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。