2

我发现了几个在一个 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 个相同的类。它们被用作快速修改器。

正常吗？为什么？

4

5 回答 5

5

这很常见。这取决于你的优先事项是什么。

你关心你的代码可读性和可维护性吗？如果你这样做了，那么也许你不应该使用这样的神秘类。

另一方面，对于像 Facebook 这样的网站或其他关心每个字节带宽的高流量网站，他们可能更感兴趣的是保持代码尽可能短，因此它们将拥有尽可能短的类名。

对于您引用的特定代码，我会说它不是好的代码，至少有三个原因：

  1. 它大量使用了!important修饰符。
    这几乎总是错误代码的标志——如果你必须使用!important很多，那么很明显你并没有真正很好地使用 CSS。它还可能导致需要调整相同元素样式的其他代码出现问题。

  2. 类名基于布局设计。对于. m20_ 这是一种不好的做法，因为它会将您的 HTML（通过类名）与布局联系起来。CSS 的全部意义在于将 HTML 与布局分开，因此使用像这样的类名会破坏这一点。如果您希望网站在移动设备上的工作方式与桌面浏览器不同，这也会造成一些麻烦；与这样的固定布局样式相关联的类名使这变得更加困难。 这样做的首选方法是使用描述元素用途的类名。例如，或，等等。margin:20px

    menuIteminfoPanel

  3. 这对您的 SEO 不利。搜索引擎使用页面中的所有内容来确定它的内容以及如何对其进行分类。这包括诸如类名称和 ID 之类的内容。诚然，这些不如实际内容重要，但为什么m20这对你的 SEO 没有任何帮助，因为你可以拥有谷歌认为相关的东西。

于 2013-05-29T19:47:27.183 回答
2

They're a bit cryptic, and personally I would use somewhat longer class names, but as long as they're named consistently, they're not a huge problem. The biggest drawback that I would see would be that if you wanted to change the .mh7 from 7 pixels to 8, the name no longer reflects what it is. You'd either have to set up a new .mh8, or remember that .mh7 is really 8. See complaints against Hungarian Notation.

于 2013-05-29T19:45:23.560 回答
2

我不会称其为正常或异常，但如果您希望人类能够阅读和理解它，我不建议这样做。

我想一个智能的 CSS 压缩器可以重命名 CSS 类并更新 HTML 和 Javascript 以缩短它们，但这些压缩器的输出不适合人类阅读。您将使用源文件，然后在源文件上运行压缩器以生成乱码版本。

看起来这些类是选择器实际功能的缩写描述，例如.m20给所有东西一个 20px 的边距。我的经验法则是使用类来描述功能是什么而不是外观。所以，我可能会使用一个.bright类。在一次设计迭代中，这可能是鲜红色。在随后的迭代中，它可以更改为紫色或其他任何颜色。调用它.bright而不是.red使类的名称独立于它执行的“工作”。

于 2013-05-29T19:41:24.527 回答
1

这是常见但有问题的做法。

没必要

它来自错误的信念，即短名称可以节省带宽，从而使页面加载速度更快。虽然这曾经是真的，但浏览器（除了 iE 4 及更低版本，几乎是 css 之前的区域）和配置良好的 Web 服务器使用 deflate 或 gzip 压缩来传输 css 文件。这意味着 f1 .. f100 不再占用 foobar_damn_long_classname_1 .. foobar_damn_long_classname_100 的带宽。（第一次使用时留下一些字节）

不同意

所以我最好的建议是使用合格的、合理的长 css 类名。

  • 您在编辑时节省时间
  • 您不必构建压缩机
  • 谷歌还将支持“.shoppingcart”而不是“.sc”。
  • 您可以在没有人思考“wtf”的情况下向stackoverflow寻求帮助吗？
于 2013-05-29T20:18:51.510 回答
0

尽管 Wild Wild Web 上确实没有“正常”；）我会注意到：

  • 存在于数百万页中是很常见的

  • 最好拼出描述含义的真实姓名，用破折号分隔，例如

    • content-header、content-footer、强调、main-highlight、margin-small、top-margin-medium 等。
于 2013-05-29T19:46:03.500 回答