我发现了几个在一个 webstudio 中广泛使用的 CSS 类:
.m20 {margin: 20px !important;}
.mh7 { margin: 0 7px !important;}
.mh10 { margin: 0 10px !important;}
.mb0 { margin-bottom: 0 !important}
.mb5 { margin-bottom: 5px !important}
.mt0 { margin-top: 0 !important}
.mt5 { margin-top: 5px !important}
etc.
主 css 文件中有大约 40 个相同的类。 它们用作快速修改器。
正常吗？为什么？
最佳答案
这很常见。这取决于您的优先事项。
您关心代码的可读性和可维护性吗？如果您这样做，那么也许您不应该使用这样的神秘类。
另一方面，对于像 Facebook 这样的网站或其他关心每个字节带宽的高流量网站，他们可能更感兴趣的是保持代码尽可能短，因此他们将拥有尽可能短的类名.
就您引用的具体代码而言，我会说它不是好代码，至少有三个原因:
它大量使用了
!important修饰符。
这几乎总是糟糕代码的标志——如果您必须经常使用!important，那么很明显您没有真正充分利用 CSS。它还可能会给需要调整相同元素样式的其他代码带来问题。类名称基于布局设计。所以
m20代表margin:20px。
这是不好的做法，因为它将您的 HTML(通过类名)与布局联系起来。 CSS 的全部要点是将 HTML 与布局分开，因此使用这样的类名会有点破坏这一点。如果您希望网站在移动设备上与桌面浏览器上的工作方式不同，这也会让事情变得有点困惑；像这样与固定布局样式绑定(bind)的类名会使这变得更加困难。
执行此操作的首选方法是使用描述元素用途的类名称。例如，menuItem或infoPanel等。这对您的 SEO 不利。搜索引擎使用页面中的所有内容来确定其内容以及如何对其进行分类。其中包括类名称和 ID 等内容。确实，这些内容不如实际内容重要，但当您可以拥有 Google 认为相关的内容时，为什么还要使用对 SEO 毫无帮助的
m20。
关于css - 使用像 .ml10 这样的短 CSS 类是正常做法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16822438/