Semantic-UI UI class usage

Question

What are the rules in using Semantic-ui's ui class? In the docs the ui class is not used consistently for example in defining menus

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

Answer 1

This is covered in the Glossary part of the documentation:

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.

The menu is a good demonstration of this (simplified example from documentation):

<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>

The outer menu is an actual UI component, and thus has both ui and menu. However, the inner menu is actually part of another component, the dropdown, and thus doesn't have the ui class.