Skip to content

Instantly share code, notes, and snippets.

@necolas
Last active March 28, 2024 20:34
Show Gist options
  • Save necolas/1309546 to your computer and use it in GitHub Desktop.
Save necolas/1309546 to your computer and use it in GitHub Desktop.
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

Examples

t-icon
t-icon--large

t-btn
t-btn--large

t-media
t-media__img
t-media__img--large
t-media__opt
t-media__body

State Components

Used to indicate the state of a component

Pattern

is-state-type

Examples

is-hidden
is-collapsed
is-expanded
is-selected

JavaScript Components

Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours.

Pattern

js-action-name

Examples

js-submit
js-action-save
js-ui-collapsible
js-ui-dropdown
js-ui-dropdown--control
js-ui-dropdown--menu
js-ui-carousel

About theming Components

Could reuse the Template Component naming convention, for example:

specific-name
specific-name--modifier-name
specific-name__subcomponent-name
specific-name__subcomponent-name--subcomponent-modifier-name

Or just let anything go.

<!--
What if we used more white-space around class values?
Does it make the code more readable and surface/separate the components
among the rest of the info in the HTML?
-->
<div class=" t-unit t-media ">
<div class=" t-media__img ">
<a href="#">
<img class=" product-img " src="http://example.com" alt="">
</a>
</div>
<form class=" t-media__opt js-action-rate ">
<button class=" product-rating " type="submit">
<div class=" product-rating__panel ">
<span class=" product-rating__points ">
5
</span>
<span class=" product-rating__label ">
upvotes
</span>
</div>
<strong class=" product-rating__action t-btn btn-normal ">
Upvote
</strong>
</button>
</form>
<div class=" t-media__body ">
<h2 class=" h2 ">
<a href="#">Product title</a>
</h2>
<p>[content]</p>
<ul class=" t-uilist--hz ">
<li><a class=" tag " href="#">tag name</a></li>
<li><a class=" tag " href="#">tag name</a></li>
<li><a class=" tag " href="#">tag name</a></li>
</ul>
</div>
</div>
@rafaelrinaldi
Copy link

Gotcha! Thanks @mykz.

@Zeokat
Copy link

Zeokat commented Mar 9, 2014

Zeokat interesting code, i have to adjust it a little. Thanks.

@viT-1
Copy link

viT-1 commented Aug 10, 2016

Another variant of writing css-rules is using AMCSS.
For example: http://codepen.io/viT-1/pen/VjXybd

Copy link

ghost commented Jan 1, 2017

Hi nicolas,

What is the different between a Template Components and theming Component? I can see some of your classes start with a t and some don't. I just want to know the reason and the logic please. Thanks

@ldexterldesign
Copy link

ldexterldesign commented Feb 23, 2019

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