做前端开发这行，最怕的不是bug改不完，而是回头再看自己半年前写的代码，心里骂娘：这谁写的？简直是一坨屎。

上周有个刚入行的小兄弟找我帮忙看项目，打开他的代码编辑器，我差点没忍住笑出声。首页的一个轮播图，类名叫banner1，下面有个新闻列表，叫news-list，再下面有个侧边栏，叫sidebar。最绝的是，他在一个嵌套了五层的div里，又写了一个叫div的类。我说你咋不叫div-div呢？他一脸无辜：“老师，这样不是好找吗？”

好找？等你维护的时候，你会发现这简直是灾难。这就是典型的没搞懂网页制作的模块命名规范。

咱们干这行的，都知道代码是写给人看的，顺便给机器运行。如果你用的命名规范是class="box"、class="wrap"、class="container"，那恭喜你，你的代码就像一团乱麻。一旦项目大了，几十个页面，几十个组件，你在全局搜索box，跳出来几百个结果，你根本分不清哪个是页眉的盒子，哪个是内容区的盒子，哪个是底脚的盒子。

我见过太多新手，为了图省事，直接复制粘贴。结果导致CSS冲突，样式错乱，最后花三天时间排查，发现是因为两个不同模块用了同一个类名，却覆盖了彼此的样式。这种低级错误，其实完全可以通过规范的命名来避免。

真正的网页制作的模块命名规范，核心就三个字：语义化。

什么叫语义化？就是看到类名，就知道它是干嘛的。比如，不要叫header-top，叫site-header；不要叫footer-bottom，叫site-footer。如果是电商网站，商品卡片叫product-card，而不是item-box。这样，当你以后接手别人的代码，或者半年后自己回头看，一眼就能明白这段代码是干什么的，不用去翻HTML结构去猜。

再说说BEM命名法，虽然有点啰嗦，但在大型项目中真的好用。Block（块）、Element（元素）、Modifier（修饰符）。比如card__title--large，一看就知道这是卡片组件里的标题，而且是加大版。虽然写起来长点，但绝对清晰。很多团队嫌麻烦不用，结果后期维护成本极高。我有个朋友，他们公司强制要求用BEM，刚开始抱怨连连，后来项目重构时，发现修改样式再也不用担心误伤其他模块，效率反而提高了。

当然，规范不是死规矩。有些小型项目，或者个人博客，随便起个名也没事。但只要你打算长期做，或者打算跳槽，规范的网页制作的模块命名规范就是你的职业素养体现。HR看简历，可能不看这个，但技术面时，面试官让你现场写个组件，你随手起个div1，印象分直接扣光。

还有一点，也是大家容易忽略的，就是层级关系。不要为了省事，在父级类名里重复写子级类名。比如.nav .nav-item，其实.nav-item就足够了，因为上下文已经限定了范围。这样能减少CSS的权重，提高渲染性能。虽然这点性能提升微乎其微，但养成好习惯，代码会更干净。

最后说句实在话，规范这东西，一开始觉得束缚，后来发现是自由。它让你从繁琐的命名中解脱出来，专注于逻辑和功能。别等代码堆成山了，再后悔没早点规范。

记住，好的命名，是代码的注释。别让你的同事，或者未来的自己，在代码的海洋里迷路。这点小细节，往往决定了你能走多远。毕竟，谁也不想天天在屎山代码里挖宝吧？