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.

Example

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!