July 20–24, 2015
Portland, OR

Decoupling the frontend through modular CSS

Julie Cameron (Articulate)
2:30pm–3:10pm Wednesday, 07/22/2015
Design D135/136
Average rating: ****.
(4.80, 10 ratings)
Slides:   external link

Prerequisite Knowledge

Attendees should have a solid, foundational understanding of CSS.

Description

CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner, where even the smallest of UI changes will take hours to work out. Ew.

Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.

This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.

Photo of Julie Cameron

Julie Cameron

Articulate

Julie Cameron is a front end developer for Articulate, working remotely from metro-Detroit. She is co-founder of the Ann Arbor chapter of Girl Develop It and is an instructor at Girl Develop It Detroit. Julie is a fan of Sassy CSS and modular architecture, responsive web design, and is a student of JavaScript and continuous improvement. She is an open source developer of SlickQuiz, and is a 2013 GitHub OSCON Scholarship Recipient for Women in Tech.