html - Semantic-UI UI 类的使用

Question

使用Semantic-ui 的ui 类有什么规则？在文档中，ui 类的使用并不一致，例如定义菜单

<div class="menu">
<div class="ui menu">

Answer 1

这包含在 Glossary 中部分文档:

ui is a special class name used to distinguish parts of components from components.

For example, a list will receive the class ui list because it has a corresponding definition, however a list item, will receive just the class item.

The ui class name helps encapsulate CSS rules by making sure all 'parts of a component' are defined in context to a 'whole' component.

It also helps make scanning unknown code simpler. If you see ui you know you are looking at a component.

菜单很好地展示了这一点(来自文档的简化示例):

<div class="ui text menu">
  <div class="ui dropdown item">
    Applying
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Applications</div>
      <div class="item">International Students</div>
      <div class="item">Scholarships</div>
    </div>
  </div>
</div>

外部菜单是一个实际的 UI 组件，因此同时具有 ui 和 menu。然而，内部菜单实际上是另一个组件的一部分，即下拉菜单，因此没有 ui 类。