Master CSS: Semantic HTML, Modular Design, and Naming Conventions

CSS may appear simple at first glance, but as you dive deeper you’ll discover its complexity and depth.

Four key practices ensure robust CSS at scale: use proper semantics, modularize your code, adopt a unified naming convention, and follow the single‑responsibility principle.

Use Proper Semantics

Semantic HTML means choosing appropriate tags; the example below shows a bad versus a good markup.

<!-- bad --><div class="footer"></div><!-- good --><footer></footer>

Semantic CSS requires class names that convey structure and function without being overly specific.

A simplified Medium layout demonstrates meaningful class names.

&lt;div class="stream"&gt; &lt;div class="streamItem"&gt; &lt;article class="postArticle"&gt; &lt;div class="postArticle-content"&gt; <!-- content --> &lt;/div&gt; &lt;/article&gt; &lt;/div&gt; &lt;/div&gt;

These names make the hierarchy and purpose instantly recognizable.

Modularization

In component‑driven UI frameworks (e.g., React), break pages into reusable components. The example below shows a Product Hunt stream component.

Each colored block represents a component; stream items contain a thumbnail and product information.

&lt;div class="stream"&gt; &lt;div class="streamItem"&gt; &lt;!-- product info --&gt; &lt;/div&gt; &lt;/div&gt;

Because components are independent, you can replace or adjust one without affecting others.

Unified Naming Convention

Several CSS naming methodologies exist (OOCSS, BEM, SMACSS, Atomic). The author prefers BEM for its clarity.

.block {} .block__element {} .block--modifier {}

Blocks represent high‑level components, elements are sub‑modules, and modifiers indicate states.

Single‑Responsibility Principle

Each CSS class should serve a single purpose. Separate global styles from component‑specific styles.

.splash { background: #f2f2f2; color: #fff; margin: 20px; padding: 30px; border-radius: 4px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

When a class becomes too complex, split it into focused classes to improve maintainability.

Start simple, follow basic CSS guidelines, and iterate to continuously improve your stylesheet.