CSS
CSS
Pre-processing pitfalls, Performance, and Specificity
Presented by Eric / Matt
Pre-processing is awesome!
body#home header#header nav ul.navigation,
body#search header#header nav ul.navigation,
body#help header#header nav ul.navigation {
list-style: none;
border: dotted 1px #999;
padding-left: 10px;
margin-top: 10px;
}
body#home header#header nav ul.navigation li.nav-item,
body#search header#header nav ul.navigation li.nav-item,
body#help header#header nav ul.navigation li.nav-item {
display: inline-block;
padding: 5px;
}
body#home header#header nav ul.navigation li.nav-item a,
body#search header#header nav ul.navigation li.nav-item a,
body#help header#header nav ul.navigation li.nav-item a {
background-color: #fff;
color: green;
text-decoration: none;
}
Bad CSS
But my LESS is so pretty...
body {
&#home, &#search, &#help {
header#header {
nav {
ul.navigation {
list-style: none;
border:dotted 1px #999;
padding-left:10px;
margin-top:10px;
li.nav-item {
display:inline-block;
padding:5px;
a {
background-color: #fff;
color: green;
text-decoration:none;
}
}
}
}
}
}
}
Not Pretty
Don't re-construct your DOM in your LESS
body {
&#home, &#search, &#help {
header#header {
nav {
ul.navigation {
list-style: none;
border:dotted 1px #999;
padding-left:10px;
margin-top:10px;
li.nav-item {
display:inline-block;
padding:5px;
a {
background-color: #fff;
color: green;
text-decoration:none;
}
}
}
}
}
}
}
Why is this a problem?
- It's difficult to read/maintain
- Selectors are too specific
- Performance is not great
- Large CSS with too many selectors