为什么用多个div标签？

Question

前端开发时用多个div标签包围某个元素，就像下面给出的代码，为什么要这样写？只用一个div不行么？我是初学者，一直有这个疑问。

<div class="top-bar py-2 border-bottom">
    <div class="container">
        <div class="row middle-flex">
            <div class="col-xl-7 text-lg-left text-center">
                <div class="row">
                    <div class="col-xl-3 col-6 header-top_w3layouts">
                                <p class="text-da">
                                    <span></span>Parma Via, Italy
                                </p>
                    </div>
                    <div class="col-xl-3 col-6 header-top_w3layouts">
                            <p class="text-da">
                                <span class="fa fa-phone mr-2">a</span>
                                </p>
                    </div>
                <div class="col-xl-6"></div>
            </div>
        </div>

暂无

Answer 1

用一个就行。一般来说 dom 越少渲染越快，但是有时候为了一些模块化复用，我们也能接受这种嵌套

你要看他实现了什么功能

只说 row 和 col，分别是定义了一行和每一个元素，col-xl-7 是栅格系统，在 xl 尺寸可以变为 7 宽度。你不可能行和列用一个 div 表示

至于 top-bar py-2 border-bottom 和 container 大概是可以合并的。

Answer 2

1. 有时候写代码的时候考虑不周，会有冗余，很正常。不需要把别人的代码当成完美的，大家都是跑起来就行。
2. 代码并不是越精简越好，很多时候为了可维护性，要牺牲一些性能。尤其在前端领域，因为用户电脑的计算资源通常来说是富裕的，开发效率和维护效率更重要。
3. 初学的时候有问题很正常，有时候不用想太多，多写一写，判断力会提升不少，你也会知道哪些地方该思考，哪些地方不用考虑那么多。