Most frontend developers have already heard of Object Oriented CSS, yet it is still sorely under-practiced.
Do your CSS files have overrides and !importants scattered through them? Do they often come in at 3000 lines+ for a regular site?
Tied with good semantic HTML, the Object Oriented CSS approach really is the answer to rapid, lightweight, scalable and easy to maintain frontend code. OOCSS will speed up any front end build, but really comes into its own on bigger sites.
I will talk through my approach to frontend builds and show how OOCSS makes the process so much easier.
I'll also talk a bit about CSS compilers and how it is important to have a good understanding of OOCSS methods before jumping into SASS or LESS. Poor CSS practice isn't going to be rescued by a compiler; in fact it can even compound problems by bringing in another layer to debug.
I hope to instill a real understanding of what OOCSS means, why it REALLY matters, and how it's going to make you a better front end developer!
@graemeblackwood
http://www.deeson-online.co.uk/graeme-blackwood
Presented at Frontend United – http://frontendunited.org
39. .block = inherited base styles only
.grid-4 = grid class
.theme-a = theme class, H3 and p inherit colour
.padded is a class I add to the grid framework for situations like this
40. <div class=”grid-4 theme-a block”>
<h3>Block title</h3>
<p>Hello world!</p>
</div>
.grid-4 comes from your grid framework
.theme-a {
background-color: #580174;
border-radius: 6px;
color: #fff; //H3 and p inherit this
}
41. Carousel nav tabs
Object is a Drupal menu – UL with a class of .sidebar-menu.
Custom jQuery targets the ID.
42. Also used on a listing
And it flexes to the container
43. 99% of the styles are
reused, targeted
through .right .sidebar-menu
only to flip the active item
50. Be particularly careful
with nested selectors
http://thesassway.com/beginner/the-inception-rule
http://37signals.com/svn/posts/3003-css-taking-control-of-
the-cascade
51.
52. Disregarding the other
principles of OOCSS may
create pain later
You could end up with generated CSS bloated
even more than if you had hand-coded it
53. Summary
• OOCSS is as much a mindset as a technique
• The principles are to reduce, reuse and recycle code
• This is done through separating layout from theme
• and the container from the content
• It relies primarily on reused classes and markup
• We are working on Drupal 8 to make it much easier to
change markup. In the meantime, try Display Suite or Skinr
for node theming
54. Summary
• CSS preprocessors like SASS and LESS are great
• But they create another layer to debug
• And the code they generate can be very bloated
• Preprocessors are not an excuse to be lazy
• They still need to be used with an OO mindset