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>
<html>
<head>
    <title>Research</title>
    <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 -->
    <style>
        
        /* Class must be set on the root element of the "error notification" component. */
        .spike-error-notification {
            
        }

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

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

    </style>
</head>
<body>
    <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>
    </div>
</body>
</html>

Leave a Reply