Skip to content

Instantly share code, notes, and snippets.

@wrumsby
Last active February 9, 2022 09:47
Show Gist options
  • Save wrumsby/8908260 to your computer and use it in GitHub Desktop.
Save wrumsby/8908260 to your computer and use it in GitHub Desktop.
CSS naming convention.
/* Base styles */
body {}
p {}
/* .layout-{name} */
.layout-sidebar {}
/* .{moduleName} */
.modal {}
/* .{moduleName}--{subComponent} */
.modal--header {}
/* .{moduleName} */
.button {}
/* .{moduleName}-is-{stateName} */
.button-is-disabled {}
/* .{moduleName}-{subModule} */
.button-default {}
/* .{moduleName}-{subModule} */
.button-primary {}
@jamesmacfie
Copy link

In this variation, a submodule is a variation on a module. So .button would be a module with .button-primary being the submodule. I prefer the term "modifier". "Submodule" is a curious term to use as it implies a descendent relationship.

@wrumsby
Copy link
Author

wrumsby commented Feb 11, 2014

A subcomponent would be something like:

<div class="modal">
    <!-- .modal--header is a subcomponent -->
    <div class="modal--header">Modal</div>
    <div class="modal--body">
        ...
    </div>
    <div class="modal--footer">
        <!-- .btn-primary is a submodule -->
        <a href="#" class="btn btn-primary">Save</a>
        <a href="#" class="btn btn-cancel">Cancel</a>
    </div>
</div>

@wrumsby
Copy link
Author

wrumsby commented Mar 10, 2015

More Transparent UI Code with Namespaces has some interesting ideas on adding namespace prefixes too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment