Day 20. CSS Architecture

October 30, 2019

Possible approaches

BEM: Block, Element and Modifier
OOCSS: Object Oriented CSS
SMACSS: Scalable and Modular Architecture for CSS
Atomic CSS

Notes From CSS Architecture By Philip Walton

Philip outlines 4 features of good CSS Architecture

Predictable: Predictable CSS means your rules behave as you’d expect.
Reusable: CSS rules should be abstract and decoupled enough that you can build new components quickly from existing parts
Maintainable: When new components and features need to be added, updated or rearranged on your site, doing so shouldn’t require refactoring existing CSS.
Scalable: Scalable CSS means it can be easily managed by a single person or a large engineering team

Common Bad Practices

Modifying Components Based On Who Their Parents Are

.widget {
  background: yellow;
  border: 1px solid black;
  color: black;
  width: 50%;
}

#sidebar .widget {
  width: 200px;
}

body.homepage .widget {
  background: white;
}

Not Maintainable!

If the #sidebar .widget component is redesigned, we’d have to change code in a lot of places to make things work the way they should.

Overly Complicated Selectors

#main-nav ul li ul li div {
}
#content article h1:first-child {
}
#sidebar > div > h3 + p {
}

Not Reusable

The above CSS is strongly dependent on markup and can break with HTML changes (E.g Changing div to section). Besides, we can’t extend these styling to some other HTML element.

Overly Generic Class Names

<div class="widget">
  <h3 class="title">...</h3>
  <div class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum
    justo et est dapibus sit amet euismod ligula ornare. Vivamus elementum
    accumsan dignissim.
    <button class="action">Click Me!</button>
  </div>
</div>

.widget {
}
.widget .title {
}
.widget .contents {
}
.widget .action {
}

The more generic the class name, the higher the chances it’s used somewhere else (by frameworks or simply you).

Best Practices

Philip shares some good and helpful tips for writing better CSS

Be Intentional: Applying classes directly to the elements you want to style is the best way to keep your CSS predictable.

/* Grenade */
#main-nav ul li ul {
}

/* Sniper Rifle */
.subnav {
}

Seperate Your Concerns: Layout and position should be handled by either a separate layout class or a separate container element.
Namespace your classes: If an element is a member of a visual component, every one of its sub-element classes should use the component’s base class name as a namespace.

/* High risk of style cross-contamination */
.widget {
}
.widget .title {
}

/* Low risk of style cross-contamination */
.widget {
}
.widget-title {
}

Extend components with modifier classes

/* Bad */
.widget {
}
#sidebar .widget {
}

/* Good */
.widget {
}
.widget-sidebar {
}

Organize Your CSS Into a Logical Structure
Use Classes For Styling And Styling Only: Anyone who has worked on a large project has come across an HTML element with a class whose purpose was completely unknown. You want to remove it, but you’re hesitant because it may have some purpose that you’re not aware of.

-When you see a class in the HTML, you should be able to tell instantly what its purpose is. My recommendation is to give all non-styled classes a prefix. I use .js- for JavaScript and I use .supports- for Modernizr classes. All classes without a prefix are for styling and styling only.

Name your classes with a logical structure

Conclusion

I’ve learned that writing CSS that works isn’t everything. Writing good CSS that anyone can understand takes lots of practice.

It’s also worth noting that every situation is different and in some cases, what everyone knows as best practices will not be the perfect fit for the problem.

Other Resources

Tomorrow

I’ll be learning about Progressive Enhancement & Graceful degradation tomorrow