Thema CSS

See Thema examples for inspiration. Write an article blending GPS, my own Thema styles, and (some) learning points from ECSS It's not a silver bullet. Make hard decisions for "pretty" and reliable rules. Isolate and flatten.

Wherever possible we should be:

• Styling RAW Html as a priority (such as forms)
• Getting our specimen.html file ready
• A .gl-obal design-system, adding only what's necessary
• A #page ID with repeatable .snake-case CSS names
  • A #section unique to that page (or view)

Our .snake-case or #section CSS can move up the hierarchy if it turns out we'd like to use it on another page — it can graduate to our .gl-obal design-system. The idea with Thema is to allow us to have flat-style CSS (not nested too deeply) yet descriptive names.

CSS shouldn't be nested more than 3 levels deep (unless short, such as p or a) and a few other rules.

1. It's nice that .gl-Camel_Case classes stand out a bit (easy to spot styles that are design-system)
2. Thema nicely "chops off" letters (kind of like codes) in a shorthand way to describe it's parents
3. Plain HTML should be used as much as possible over adding unecessary class names.

An example:

<main id="admin">
  <nav class="gl-Nav">
    <ul>
      <li>Navigation item</li>
      <li class="gl-Nav_Icon">Navigation item with icon</li>
    </ul>
  </nav>
  <section id="dashboard">
    <div class="dash-visuals"> <!-- Scoped to `#section` name -->
      <!-- You "chop off" the first letter of it's parent -->
      <aside class="dash-v-controls"> <!-- Chop off to get `-visuals` -->
        <form class="dash-vc-settings"> <!-- .v. `-controls-` -->
          <div class="dash-vcs-wrapper"> <!-- .vc. `-settings` --> 
            <label class="dash-vcs-search"> <!-- .vcs. `-search` -->
            <div class="dash-vcs-search-box"> <!-- and so on -->
              <label>Search for data</label>
              <input type="search">
            </div>
          </div>
        </form>   <!-- /end .dash-vc-settings -->
      </aside>    <!-- /end .dash-v-controls -->
    </div>        <!-- /end .dash-visuals -->
  </section>      <!-- /end #dashboard -->
  <footer class="gl-Footer">
    ...
  </footer>
</main>

Research questions

1. How do I integrate these styles when using frameworks?
2. How can Ai guide and help me creating CSS (and it's rules)?
3. How can we speed up writing CSS and maintain order (with Thema rules)?
4. How can we utilise tools for avoiding writing CSS wherever possible?¹

Inspiration

Besides ECSS, GPS, and Thema I've loosely borrowed ideas from @mdo and Google's code guide for orderly code.

Footnotes

1. Such as Ai, tooling, ux guis, and so on. These are all great and useful (in the future will we even write CSS?) but I'd advise having at the very least a cursory knowledge of CSS before leaning on these; even if it's just Markdown level knowledge (typography, colours, basic elements). Without it, you may be lost if something goes wrong, and bugs are a guarantee when styling websites! ↩