# Utilities

Utility classes are classes that do one thing, and one thing well. They are different _class utilities_, like the one used in
[layouts layer](/layout).


<aside class="callout">
  <span class="title">Class utilities</span>
  <p>Class utilities are classes that allow you to control one aspect from a different CSS class. Class utilities on their own have no impact whatsoever, in contrast to utility classes. Class utilities are prefixed with &#39;--&#39; to make them easily spottable.</p>
</aside>



Feo.css offers a very limited set of utility classes: small, single-purpose helpers that are independent of design tokens. Utilities tied to a design scale — spacing, sizing, and similar — are intentionally left to your own project, since Feo.css ships very few tokens of its own.


<ul>
  
    <li><a href="/utilities/click-area/">Click Area</a></li>
  
    <li><a href="/utilities/container/">Container</a></li>
  
    <li><a href="/utilities/counted/">Counted</a></li>
  
    <li><a href="/utilities/indexed/">Indexed</a></li>
  
    <li><a href="/utilities/layout-items/">Layout Items</a></li>
  
    <li><a href="/utilities/no-print/">No Print</a></li>
  
    <li><a href="/utilities/typography/">Typography</a></li>
  
    <li><a href="/utilities/visually-hidden/">Visually Hidden</a></li>
  
    <li><a href="/utilities/z-index/">Z-Index</a></li>
  
</ul>