时间戳

首页 > 解决方案 > 为什么一些 HTML/CSS 设计者在他们的 HTML 中使类名复杂化？

html - 为什么一些 HTML/CSS 设计者在他们的 HTML 中使类名复杂化？

问题描述

<div class="navigation header-transparent-light aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

为什么一个部门的类有所有这些信息？一个类不应该只是为了允许 CSS 文件定位它并在样式表上自定义它吗？

这是来自 www.marcus.com 主页源中的第 126 行。

身体从一堆 div 创作开始。

    <div class="root responsivegrid">

<div class="aem-Grid aem-Grid--14 aem-Grid--default--14 ">

    <div class="responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

<div class="aem-Grid aem-Grid--default--14 ">

    <div class="experiencefragment aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

大型网站中普遍存在的所有长类名是怎么回事？

免责声明：我刚刚开始使用 HTML（3 天后）。

第一次看到这一切，我问自己..“他们怎么不迷失方向？”

标签： htmlcss

解决方案

我想我也许可以对这里的事情有所了解。

在过去的十年中，CSS 中的命名约定已成为 Web 开发的重要组成部分，旨在防止您的样式在您的应用程序中“泄漏”，并确保您不必编写过度使用特定性的 CSS 。

通过遵守命名约定，它应该意味着编写元素独有的样式，而不是与全局样式作斗争。BEM可能是最常用的约定，但它会导致大量的类名，并且何时知道将什么定义为“块”会变得很棘手。

现在有了 Web 组件，希望很多这些问题都会消失。我建议阅读css-evolution-from-css-sass-bem-css-modules-to-styled-components以更好地理解为什么 CSS 看起来像今天这样，并了解可能会去哪里.

另一个很高兴知道HTML 类名不区分大小写。因此，虽然您可能会在类名中看到 pascalCasing，但通常类名应该是 kebab-case 即.global-header而不是.globalHeader.

推荐阅读