<分区>
目前我正在使用 jquery 开发一个网络应用程序，我需要在我的职业生涯中第一次使用大量的 css。
我有一个基本的设计问题。使用 css 的常用方法是什么。以下两个应该很好地解决问题的简单示例(只是伪代码):
基于内容:
html:
<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>
CSS:
.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 ... */ }
基于函数:
html:
<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>
CSS:
.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 */}
...
我读到您应该尝试将基本 html 与您的 css 设计分开。我有一种感觉，基于内容的版本应该是正确的方式，因为不需要知道 css 是如何实现的。
但另一方面，基于内容的版本中有太多双重定义的样式。即使两个面板做完全相同的事情，您也必须为它的每个部分编写冗余代码。假设您只想更改一件事，您必须在每个类(class)中一次又一次地更改它。
感谢您的输入和反馈!