css naming | ceci n'est pas un pipe
DESCRIPTION
Slides of a lighting talk I gave for the 2014 fronteers conference on css namingTRANSCRIPT
Ceci n'est pas une pipe@wnas
About css naming conventions.
What are they.
.g-form-checkbox {// always
}
.g-form-checkbox {// use
}
G is for the generic stuff
.g-form-checkbox {// a
}
FORM is for the form stuff
.g-form-checkbox {// carrousel
}
CHECKBOX is for the …
Why should you use them
.textAlignRight {text-align: left;
}
We are wiser than that, right?
.button {// be
}
.btn {// excellent
}
.normalButton {// to
}
.button button {// each
}
.button {// be
}.btn {
// excellent}.normalButton {
// to}.button button {
// each}button {
// other}
To make you think
To help you communicate
Don’t build pages
Build components
And elements
To get you started
BEM https://bem.info/method/
OOCSS http://oocss.org/
SMACSS https://smacss.com/
My choice?
Build your own
Pattern lab http://patternlab.io/
Atoms, molecules and organisms
Examples
Atoms
<input>
.g-form-input {// Neverborder: 1px solid pink;
}
Types
.g-form-input {// gonnaborder: 1px solid pink;
}.g-form-input[type=search] {
// giveborder-color: orange;
}.g-form-input[type=number] {
// youborder-style: dotted;
}
State
.g-form-input {// upborder: 1px solid pink;
}.g-form-input:focus {
// Neveroutline: 0;
}.g-form-input[type=search]:focus {
// gonnaborder-width: 2px;outline: 2px dotted blue;
}
You could also do…
.g-form-input {// sayborder: 1px solid pink;
}.g-form-input.search {
// good beyborder-style: dotted;
}.g-form-input.search.disabled {
// Neverborder-color: lightgray;
}
.g-form-input {// gonnaborder: 1px solid pink;
}.g-form-input-search {
// turnborder-image-outset: sides;
}.g-form-input-search—disabled {
// aroundborder-left:0;
}
Be lazy!
Molecules
How they play together
.g-m-search {// and
}}
.g-m-search {// desert
}.g-m-search .g-form-input {// youborder-bottom: 5px;
}
Organisms
.g-o-header {// now for something,
}.g-o-header .g-form-input:focus {// completely differentborder-bottom-color: blue;
}
.g-o-header .g-m-search {// the
}.g-o-header .g-m-search .g-form-input:focus {
// Larchborder-top-color: khaki;
}
Templates
.g-t-search .g-form-input {// red pillborder-color: red;
}
.g-t-result .g-form-input {// blue pillborder-color: aqua;
}
Pages
.g-t-result.g-page-jammSession .g-form-input {// almost done Krijn…border: 0;
}
A few more pointers
Avoid using ID’s
Don’t over nest
Avoid direct child selectors >
Also avoid the Adjacent sibling combinator (+) and the General sibling combinator (~)
More than one class on an element ain’t all bad.
<div class=“g-form-button
g-form-button-inactive g-form-button-primary”>
<button>Click me</button></div>
Talk about it!
@wnas