Rethinking CSS
By: Louis Novick
Goals
"What" is modular CSS?
"Why" modular CSS?
"How" can we rethink our CSS?
- SCSS, SASS, LESS
- A lot of Frameworks
- Choice & Complexity
"Thinking Modular CSS." Thinking Modular CSS. N.p., n.d. Web. 30 June 2015.
http://talks.drewb.io/tmcss-score/#319
"Thinking Modular CSS." Thinking Modular CSS. N.p., n.d. Web. 30 June 2015.
http://talks.drewb.io/tmcss-score/#319
Writing & Maintaining CSS over time can feel like...
"Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. So, they don't, they only add. I've seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company's focus on performance."
Coyier, Chris. "The Debate Around "Do We Even Need CSS Anymore?" | CSS-Tricks." CSS-Tricks. N.p., 26 June 2015. Web. 28 June 2015.
CSS IS HARD
YOU SPEND A LOT OF TIME TRYING TO GET STARTED
There could be 3,000 or more lines of code you didn't write
FILE SIZE WILL KEEP GETTING BIGGER
CSS must be modified over and over again and will grow in a 1:1 relationship with complexity of content
10kb
18kb
50kb
VERY LITTLE REUSE OF CODE
"Not invented here" syndrome
Wait for it...
So what do we do about it?
Pages
Components
Create Components
Reusable pieces
"The traditional way to handle complexity in programming is to break large complex things into smaller well-formed “modules”. Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions."
- Dave Rupert
This is not just a page!
It is a collection of front-end modules. Reusable objects.
Reusable style patterns that can be used on any other page.
An interesting comparison
Reusing elements makes your CSS more
-
Predictable
-
Maintainable
-
Modular
Example
Normally you might mark this up like this
<div class="avatar">
<div>
<a href="#" title="">
<img src="image.jpg" alt="" />
</a>
<h3><!-- ... --></h3>
<p><!-- ... ---></p>
</div>
<div>
<ul>
<li></li>
<!-- ... -->
</ul>
</div>
<div>
<!-- ... -->
</div>
<div>
<!-- ... -->
</div>
</div>
You would probably scope each element within the .avatar class
.avatar {}
.avatar div {}
.avatar img {}
.avatar ul {}
.avatar ul li {}
.avatar h3 {}
.avatar p {}
This will work fine but what happens if that <h3> into a <h5>?
You'll need to change both the HTML and CSS to achieve the desired result.
Easy fix, we can scope everything to .avatar
.avatar {}
.avatar-name {}
.avatar-title {}
.avatar-img {}
.avatar-list {}
.avatar-stats {}
.avatar-link {}
.avatar-thumbs {}
The name is too specific, lets change that
.card {}
.card-name {}
.card-title {}
.card-img {}
.card-list {}
.card-stats {}
.card-link {}
.card-thumbs {}
What happens if we notice .card-list being reused many times in different places?
.list {}
The card and list styles are now separate and can be reused
.list {}
/* ... */
.card {}
You are now starting to build independent modules that form a pattern!
.list {}
/* ... */
.card {}
We might need to mess with the padding-bottom a bit, why not add some tools?
.pbf {
padding-bottom: 0;
}
.pbxs {
padding-bottom: .5em;
}
.pbs {
padding-bottom: 1em;
}
.pbm {
padding-bottom: 1.5em;
}
.pbl {
padding-bottom: 2em;
}
.pbxl {
padding-bottom: 2.5em;
}
It's not going to be perfect right away
"Constantly refactoring your code and looking for patterns throughout your design will allow you to refine your CSS and write more maintainable, extensible and efficient code"
Refactor, Refactor, Refactor
Check these out!
http://talks.drewb.io/tmcss-score/#319
http://appendto.com/2014/04/oocss/
http://drewbarontini.com/articles/single-responsibility/
http://mvcss.io/
http://www.slideshare.net/stubbornella/object-oriented-css
Thanks!
Object Oriented SCSS
By louisnovick
Object Oriented SCSS
- 1,466