Blog on software engineering
CSS class naming guideline

CSS class naming guideline

Lets assume you want to create a "error notification" component and this component contains 2 sub components, a "close button" and a "read more" button in an application called "spike", something like:




How do I setup my CSS to style the component and it’s subcomponents.

Well I like to name components and subcomponents by what they are and try to keep the names descriptive, but short:


<!doctype html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Research page">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Icons -->
    <link rel="shortcut icon" href="/Images/icon256x256.png">
    <link rel="icon" href="/Images/icon_96x96.png">
    <!-- App styles -->
        /* Class must be set on the root element of the "error notification" component. */
        .spike-error-notification {

        /* Styling for the "close button". */
        .spike-close-button {

        /* Styling for the "read-more button". */
        .spike-read-more-button {

    <div class="spike-error-notification">
        <button class="spike-close-button" type="button"><span>×</span></button>
        <strong>An unhandled exception occurred.</strong>
        <button class="spike-read-more-button" type="button">Read more...</button>

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.