最佳基础 html 嵌套练习

Question

我正在学习使用 Foundation 编写响应式页面，我想知道使用 Foundation 作为模板（对于某些顶级 div）还是使用 foundation row/column size-number 类更好一路走好？

我的意思是我应该这样写我的 HTML:

<body>
    <div class="row">
        <div class="small-8 column">
            <div style="display: inline; width: 33%;"></div>
            <div style="display: inline; width: 33%;"></div>
            <div style="display: inline; width: 33%;"></div>
        </div>
        <div class="small-4 column">
            <div style="display: inline; width: 33%;"></div>
            <div style="display: inline; width: 33%;"></div>
            <div style="display: inline; width: 33%;"></div>
        </div>
    </div>
</body>

或者像这样：

<body>
    <div class="row">
        <div class="small-8 column">
            <div class="row">
                <div class="small-4 column></div>
                <div class="small-4 column></div>
                <div class="small-4 column></div>
            </div>
        </div>
        <div class="small-4 column">
            <div class="row">
                <div class="small-4 column></div>
                <div class="small-4 column></div>
                <div class="small-4 column></div>
            </div>
        </div>
    </div>
</body>

这个例子很简单，只是为了说明我的要求。我的问题与更深层次的嵌套有关（比如 5 层以上的行 > 列）。

Answer 1

第二种方法肯定更好，因为：

灵活性：尺寸数字类不仅与浮动布局有关，还与响应能力有关。您可以稍后添加一些中型或大型类并为不同的屏幕制作不同的布局（这不仅与列宽有关，还与调整 window 大小时更改位置的能力有关）。即使你认为你现在不需要它，谁知道未来
均匀性：尺码数字类（以及第一列）不仅与尺码和定位有关。它们还用于统一的外观和感觉，因为它们是由复杂的样式定义的 sheet。如果您需要重新定义样式，请同时为整个应用程序重新定义样式，这样您就不会忽略任何一个。这是关于空格、边距、填充等等。
Clarity：在文件中单独编写 CSS 比直接在代码中设置样式要好得多。类可以重复使用，CSS 文件是你寻找样式定义的第一个地方（无论你是团队中的新开发人员还是长时间阅读自己的代码） .
兼容性：Foundation 开发人员了解他们的代码，并且与您自己的代码相比，新版本的 Foundation 与旧 Foundation 版本的兼容性更好的可能性要大得多。

最佳基础 html 嵌套练习

Best Foundation html nesting practice

html

css

zurb-foundation