div boy，你有这些小技巧可以用

本文写给广大的 div FE boy。

如果你是奉行：万事不决用 DIV，那还勉强过得去。

但如果你是践行：想都不想就 DIV，那我劝你要三思，毕竟脑子经常不用会秀逗的。

DIV 用多了，害人终害己

div 用多了，HTML 代码就会非常难维护，比如：

这段代码的原作者自己是没什么感觉的，最有感觉的是要来维护这段代码的后来者。

在这些代码中新增功能或者 bugfix，都会非常困难，非常影响效率。

等 1 个月过去了，就连原作者估计也认不得自己的代码了，然后就会骂骂咧咧：“这是谁写的屎山代码”。

如果你看到别人写出来这些 div 代码，你会怎么做？一笑置之？吐槽？骂爹？

估计，很大概率你会跟着一起写 div 代码。慢慢地整个团队都在写这种代码。

然后，你就会陷入这些屎山代码，维护开发，定位问题，排查问题都极为困难，工作效率低，心情也会受到影响。

有同学可能会疑问，这不就是一个标签使用问题么，用哪个不都一样么，有那么大区别吗？

有，区别很大。最大的区别就是对待 HTML 代码非常随意，因为习惯了。

只要是编写 HTML 代码就不用怎么去思考，不会理解整个页面，不会提前划分模块，不会拆分组件。

一直在一个地方添砖加瓦，最后成就一个几千行代码的函数也是家常便饭。

提升 HTML 代码质量的小技巧

用不用 div 是意识问题，这里我先推荐几个小技巧，div boy 们可以先从这些小技巧开始改善你的 HTML 代码习惯。

技巧1：给 HTML 划分模块

有意识地给 HTML 划分模块，可以有效地优化你的代码，不仅是 HTML 的，还有 CSS 和 JS 代码，也会一起优化。

整个页面，HTML 是核心，HTML 做了组件化，CSS 和 JS 自然也会跟着做组件化。

就像上面的例子，很轻易就能看到，可以拆分为 When，Where，Going 组件。

当你把整个页面的 HTML 拆分组件之后，你就要跟着思考，要给这个组件传什么数据，组件之间有什么交互。

做了这些，你的代码就可以得到有效地拆分，代码解耦，代码的可维护性和可扩展性就变高了。

划分模块并不妨碍你使用什么标签，你还是可以继续使用你心爱的 DIV。

技巧2：用 CSS 节省标签

有很多同学使用 div，是因为要实现某些样式效果。

当设计稿发生了变更，要添加一些小样式的时候，我们会很随意添加一个空的 div，然后给它加样式。

在真实工作中，我看过多次，一个空 div 只是为了增加一个高度。

这样会给我们带来很多“无意义”的标签，从而让我们的 HTML 代码变得难以维护。

我们常说结构和逻辑要分离，同理，结构和样式也要分离。

因此，你也要培养这个意识，样式的事情尽量用 CSS 来实现，不要使用标签。

我们有很多好用的选择器、很多伪元素，可以让我们实现有意思的效果，而不需要新增标签。

让我们的 HTML 标签纯净，只表达内容。不管是页面性能还是可维护性，都有很大的帮助。

技巧3：先裸写 HTML 结构

我推荐你的第 3 个改变小技巧是：先裸写 HTML 结构。

很多同学喜欢按顺序，一个组件一个组件开发，一个功能一个功能开发。

这样的开发习惯有个很大的问题，就是容易返工。

因为组件之间是有交互的，功能之间也有交叉的情况，所以，当我们开发 B 组件的时候，很可能需要改动 A 组件。

我们的代码通常第一次写的时候都还不错的，它变坏主要是因为被改了很多版，而且是很随意或者很紧急的改动导致的。

如果我们在开发之前，没有思考清楚整体的方案，就很容易出现返工，到处修改，代码自然好不到哪里去。

因此，我推荐你先裸写 HTML 结构，先把整个页面的 HTML 全部写完，然后再写 CSS 和 JS。

这样做的好处就是在裸写 HTML 结构的时候，

就思考清楚页面如何划分模块和组件，组件之间怎么交互；

页面的效果应该怎样实现，HTML 结构怎么写才能更好地实现页面效果。

好了，这 3 个小技巧都不要求你立刻放弃使用 div。因为改变习惯是很难的，所以你可以先从小地方开始改变。

虽然这 3 个小技巧都不劝你放弃使用 div，但如果你真得践行了这 3 个小技巧的改变，慢慢地，你就不会是 div boy 了，你信吗？

如果你不信，可以试试看~

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。