View flow-css-naming-convention-bem-like-example.css
.alerts {} /* block */
.alerts__error {} /* element */
.alerts--show {} /* state */
View flow-css-naming-convention-semantic-example.css
// Incorrect:
<div class="article">
<div class="title">Title</div>
<div class="content">Article contents goes here!</div>
</div>
.article {}
.article .title {}
.article .content {}
View flow-css-naming-convention-ids-classes.css
// Incorrect
<ul id="list-1"></ul>
<ul id="list-2"></ul>
<img class="main-logo" />
#list-1, #list-2 {}
.main-logo {}
// Correct:
<ul class="list" id="list-1"></ul>
View flow-css-simplified-example.css
// Incorrect:
#sidebar {
background-color: #fff;
background-image: (bg.png);
background-position: 0 0;
}
// Correct:
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
View flow-css-alphabetical-order-example.css
.alert {
background-color: #eee; /* temporarily put here */
border: 1px solid #ccc;
display: block;
font-size: 10px;
padding: 5px 10px;
}
.box {
top: 0;
View flow-css-disable-rule-example.css
.alert {
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 10px;
x-display: block; /* disabled */
}
View flow-css-test-styles-example.css
.alert {
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 10px;
display: block;
background-color: #eee; /* temporarily put here */
}