我正在使用 CSS Grid，并遇到了 grid-column 和 grid-row 属性。 我暂停了一下。
它们并不复杂。 它们是用于表达元素应在网格的定义列和行中开始和结束位置的简写属性。
吸引我的是，我可以为这些线条命名。 这不是必需的（您可以使用数字），但能够命名网格线是我们可以在此处做的事情。 实际上，命名线条可以打开 简洁的 CSS 技巧。
网格线是前端开发人员拥有命名事物能力的众多示例中的另一个。 类名和 ID 一直是我们需要在 CSS 中命名的内容，但请考虑一些在样式方面命名很重要的历史较近的事物
- 变量： 为上下文命名值，例如可重复使用的颜色或数值，无论是在预处理器中还是在新的 CSS 变量 中。
- 数据属性： 根据元素的 HTML 属性 而不是类名来选择元素。
- 组件： 就像我们在 React 中看到的那样，以及未来的 CSS 功能，例如 Web Components。
- CSS 文件： 组织方法，例如 原子设计，突出了命名我们的文件（包括预处理器部分）的重要性。
- 媒体查询： 我们知道根据设备命名它们是徒劳的，因此 这必须有意义。
命名事物本身并不难。 更重要的是，命名事物的能力带来了一种力量感。 正如谚语所说：能力越大，责任越大。 在这种情况下，命名会对从代码的编写和组织方式到整体性能和可维护性的一切产生影响。 命名不当的元素 本质上是令人反感的，并且通常表明代码的整体质量。 它会导致对 不断增长的代码库 的谨慎态度。
我只想说，我花在命名一些 CSS 类上的时间比花在我自己两个孩子上的时间还多。 我很尴尬地说出来，但这是事实。
命名网格线只是我们在不断增长的职责清单中的另一个项目。 这不是一件坏事，甚至不是一件令人讨厌的事，但它再次提醒我们，前端开发 是开发、设计和架构的结合。
我认为这篇文章实际上低估了命名事物有多难和多重要。 如果你真的坐在大多数开发人员（前端或后端）的秒表后面，我敢打赌你会发现他们 20% 以上的时间都花在命名事物上。 不仅如此，我敢打赌 80% 的时间花在阅读代码上将用于阅读这些名称。 我觉得不是命名事物越来越难，而是我们工作中的实际逻辑正在被抽象为可重复使用的乐高积木，并且每个积木都需要命名。
同意，抽象和命名这些乐高积木的重要性正是关键所在。 问题的关键不是说命名事物不难，或者以前不难，而是随着我们的前进，它只会变得越来越难，也越来越重要。
几年前，我创建了一个 CSS 命名方法（主要用于我自己），但也许你可以使用一些东西？
https://github.com/kevinvanhove
Kevin，
@Kevin，
你的 GitHub 源代码非常有用，非常感谢。
-Dominique
非常酷！ 谢谢，Kevin。 :)
以下是我在断点命名约定方面想到的东西。 大小是移动优先，即 0 像素及以上。 每个 bp 都是一个范围，其中最流行的设备大小通常位于中间附近，因此我们按 bp 组对类似设备进行分组
mobile: 0px // 移动优先，即 0 像素及以上
tablet-v: 600px // 目标 768
tablet-h: 900px // 目标 1024
laptop: 1200px // 目标 1366
desktop: 1600px // 目标 1920 和更大
希望任何使用这段代码的人都能发现它非常容易理解。