Html 设计css类名：基于内容还是基于功能

目前，我正在用jquery开发一个web应用程序，这是我职业生涯中第一次需要使用大量css

我有一个基本的设计问题。使用css的通常方式是什么。下面两个简单的例子应该很好地解决这个问题（只是伪代码）：

基于内容：

html:

基于功能：

html:

我读过，你应该试着用css将基本html和你的设计分开。我觉得基于内容的版本应该是正确的选择，因为不需要知道css是如何实现的

但另一方面，在基于内容的版本中有很多双重定义的样式。即使两个面板做完全相同的事情，您也必须为其中的每个部分编写冗余代码。假设你只想改变一件事，你必须在每节课上一次又一次地改变它

---

感谢您的投入和反馈

简单的答案。您可以同时使用两者

例如，我有一个单独的文件，其中包含许多基于函数的样式

---

我主要使用基于内容的，因为我不喜欢html文件包含很多类。但有时，当您只想给出一些div

边距底部：10px

时，使用基于函数的非常有用。您可以简单地将

m-b-10

类添加到该div，而不是将另一个css写入该div。对不起，英语（

我认为混合是一个坏主意。你有两种不同位置的设计，html和css。全功能意味着，你在css中有你的设计，类名说明了它们的作用。因此无需在css中观察。另一方面，完全基于内容意味着，你不必查看html，因为只有css提供了l你需要。是的，这是真的。但是我试着写一些功能齐全的网站，这对我来说很难。所以我更喜欢基于内容的。但是我就像我说的那样使用我的文件。它使我的工作更容易（只是我的经验）。谢谢你的意见，也许会有其他答案。最后我会总结所有这些^^

<div class="ui-grid-a my-panel>
    <div class="ui-block-a my-image>
        <img src="someImage width="10"/>
    </div>
    <div class="ui-block-b my-text>
        <p>some Text<p>
    </div>
<div>

.my-panel { /* do stuff e.g alignment, width, ... */ }
.my-panel .my-image { /* do stuff e.g. set flex box, flex align-items, justify-content ... */ }
.my-panel .my-text { /* do stuff e.g. set flex box, flex align-items, justify-content ... */ }

<div class="ui-grid-a w-100>
    <div class="ui-block-a align center left>
        <img src="someImage width="10"/>
    </div>
    <div class="ui-block-b align bottom right>
        <p>some Text<p>
    </div>
<div>

.w-100 { width: 100% }
.align { /* do basic align stuff e.g. set flex box */ }
.align.top { /* do top alignment e.g. set flex align-items to top */}
.align.bottom { /* do bottom alignment e.g. set align-items to bottom */}
.align.left { /* do left alignment e.g. set flex justify-content to left */}
...