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 {}
@wrumsby
Copy link
Author

wrumsby commented Feb 10, 2014

I attended Jonathan Snook's SMACSS workshop as part of Webstock 2014 and he said that if he had to redo the naming convention used in SMACSS this is the style that he'd follow.

@jamesmacfie
Copy link

So, comparing this to BEM:
BEM: .module__submodule
SMACSS 2.0: .module--submodule

BEM .module--modifier
SMACSS 2.0: .module-modifier

BEM .module__submodule--modifier
SMACSS 2.0: .module--submodule-modifier

The difference being submodules are denoted with a - instead of a __ and modifiers are - instead of -- ?

And the notion of a submodule is the same as a modifier?

@wrumsby
Copy link
Author

wrumsby commented Feb 10, 2014

And the notion of a submodule is the same as a modifier?

Yup, he basically mapped BEM to this:

B : moduleName
E : moduleName--subComponent
M : moduleName-subModule

@adamburmister
Copy link

It's less jarring.

Also it means I can go back to camel casing :) (I never got used to -'s in class names)
.someFoo--subFoo

@psyrendust
Copy link

I like this a lot, but I'm not quite sure what the difference is between a --subComponent and -submodule as far as structure is concerned. They both kind of seem the same to me depending the context.

@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