OOCSS  & SASS - Airbnb Tech Talk: Scalable CSS OOCSS & SASS - Airbnb Tech Talk: Scalable CSS / tutorial / free

http://youtu.be/GhX8iPcDSsI

Nicole Sullivan talks about the object-oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages?
0 favorites
submitted about 4 years ago, by SkinnyGeek1010
OOCSS  & SASS - Airbnb Tech Talk: Scalable CSS popular tutorial

6 Comments

SkinnyGeek1010

I really need to utilize @extend more to dry up some of my SMACSS. I'm glad I wasn't the only mis-using sass in the beginning! This was a great talk, and she's really friendly in person too!!

SkinnyGeek1010, about 4 years ago

pineapple

Explain? I will watch, but I also like cliffnotes

pineapple, about 4 years ago

SkinnyGeek1010

Sure, the tl:dr is basically how you can use preprocessors with oocss. This talk goes over oocss pretty lightly and focuses more less on drying up your code with sass.

For example, using when creating a flash message you can create a class called message, and that has the basic styling for all flash messages. You can then create a class called message-error and then @extend messege and add a bk color of red.

This looks like:

     .clearfix {
   // some code
}

 .message {
   @extend .clearfix;
   width: 400px;
   height: 300px;
 }

 .message-error {
   @extend .message;
   background: red;
   border: 1px solid black;
 }

 .message-alert {
   @extend .message;
   background: yellow;
   border: 1px solid white;
}

 // outputs (i think lol)

 .message, .message-error, .message-alert {
   width: 400px;
   height: 300px; 
}

.message-error {
   background: red;
   border: 1px solid black;
}    

.message-alert {
   background: yellow;
   border: 1px solid white;
}

 .clearfix, .message, .message-error, .message-alert {
   // some clearfix code
}

SkinnyGeek1010, about 4 years ago

pineapple

That's actually pretty sick, it's kind of like a collapsed specificity. I wonder when you have a huge css file though if that is better than being extremely tedious about your css statements and specificity to with. It sure is easier to read but perhaps it will bloat up your code a lot with redundant properties?

pineapple, about 4 years ago

SkinnyGeek1010

Yea that's definitely a problem, lean sass is not always lean css! I think that's one of the easiest things to do when first starting out.

The selector list can be really long. Although the specificity doesn't get increased, every comma is a separate specificity scope (not sure if that makes sense lol). Basically if you would use "header div section .message" then it would increase specificity. So the clearfix example only has one layer of specificity for each.

If you use nesting in sass you can get into huge specificity problems though. I generally only go in 2 levels tops, mainly to scope things into areas like header, sidebar, etc..

The clearfix is a good example of how not to do it because it quickly adds over the wire bloat in your css. I always add a cf class in the html rather than in the css.

SkinnyGeek1010, about 4 years ago

SkinnyGeek1010

Bu yea it's definitely a great tool for keeping sane as long as you know what's being output. That's why Twitter bootstraps style's look really really weird in firebug, everything is just extending from other components. Gzip aslo really helps battle the selector bloat.

SkinnyGeek1010, about 4 years ago


Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.