Topics
Social
Subscribe

Codemash: A Designer's Perspective on CSS

Codemash: A Designer's Perspective on CSS

Last year at Codemash I attended Julie Cameron's talk, "Decoupling the Front-End Through Modular CSS." The talk was excellent and Julie shared a lot of insights. 

“No one knows what they are doing with CSS,” Julie pointed out right away.

She makes a lot of sense. For instance, the production code of Facebook’s login page shows eight CSS style sheets, thousands of lines long, and full of server-computed nonsense. Is this really what CSS is all about? Nonsense generated by some logic? I don't think so; CSS can be beautiful and be semantic. 

Julie begins the talk and shows issues of what we are doing wrong by stating:

  • A top down approach to writing styles often leads to repetition 
  • Selector misuse often leads to specificity trouble.
  • Bloat + bad selectors = bad performance

In my experience, many developers find CSS to be an easy language to learn. They often pass off its importance as a second thought, leaving their CSS with no conventions and the issues Julie pointed out. She specifically argues that we spend more time thinking about how CSS should work with HTML, javascript and even feature specs and not spending time thinking about CSS as a modular concept.

CSS as a modular concept is not a new language, it’s not a new pre-processor, and it’s really not something your favorite text editor will help you with. It’s simply a workflow, which you the developer will follow. It’s not ground breaking nor revolutionary but it provides predictability, scalability, and organized CSS code.

Julie explained that there are a few CSS modular solutions that include, OOCSS (CSS for grown ups), BEM (CCSS), SMACSS (Dry CSS) and Atomic Design (etc).

OOCSS is a scalable, maintainable, semantic, and predictable approach to writing CSS. Nicole Sullivan created OOCSS while working for Facebook. She created reusable modules, which she called the, “media object” that saved hundreds of lines of code. This module is a content block containing a fixed size media element like a picture or video with other variable sized content, such as text. The Facebook status box is the perfect example of this in use.

The Media Object

source: Julie Cameron via Slideshare (slide 47)

Modular CSS is taking common items and adding variations like a CSS selection for buttons.

Modules with Variations

source: Julie Cameron via Slideshare (slide 57)

This approach is used with the Bootstrap framework with .btn .btn-primary.

example button styles

source: The Bootstrap Framework

You can easily change the state of the button by changing the second part of the selector: -default, -primary, -success and so on.

Julie shows that this can be used on all modules and components on a site.

Module Components

source: Julie Cameron via Slideshare (slide 62)

As far as using underscores, camel case, periods or double dashes, it’s really up to you, as long as you are consistent with your selectors.

The other modular CSS solutions, BEM (CCSS), SMACSS (Dry CSS) and Atomic Design (etc) are all based on similar principals. Some of these solutions allow for dry HTML or Dry CSS, which means more selectors (using a lot of presentational classes) will make for dry CSS, and using fewer semantic classes will create dryer HTML.

Julie explained that she personally likes to use a hybrid system.

My System == A Hybrid System

source: Julie Cameron via Slideshare (slide 82)

Although there is so much more with the other solutions, which go much more in depth than this article, you can find out more on each of them on the web:

In closing, Julie urges you to remember to:

  • Organize, optimize, repeat
  • Iterate on abstraction
  • Find the right granularity
  • Establish your conventions
  • Document everything
  • Architect a style guide
  • Utilize a CSS Preprocessor (Sass, LESS, or etc)
  • Stop using CSS selectors for Non-CSS (javascript binding and etc)
  • And learn as much as you can

I want to thank Julie Cameron and her talk at Codemash 2015. She gave an outstanding talk at Codemash this year. You can find Julie on TwitterSlideshareGithubLinkedIn, or juliecameron.com

Continue Exploring

Approach

Culture

Careers

Our Work Services Commerce Cloud Approach Culture Blog Careers Contact

3344 Grand Ridge Drive NE
Grand Rapids, MI 49525
616 365 1000