43. .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
44. <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
}
54. Be particularly careful
with nested selectors
http://thesassway.com/beginner/theinceptionrule
http://37signals.com/svn/posts/3003csstakingcontrolofthecascade
55.
56. Disregarding the other
principles of OOCSS may
create pain later
You could end up with generated CSS bloated
even more than if you had handcoded it
57. 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
58. 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
Harder to maintain Bloated code is harder to read due to the sheer volume of it If the style of something changes, every instance has to be updated individually, and on bigger sites, this often means something getting missed until the client complains – not cool Adding features to / scaling up a website simply bloats the CSS
So what’s the solution?
What does this involve?
Less likely to break other parts of your site when you change things. Navigating through the code is easier Less conflicting styles Code won’t be littered with importants Scale it right up
CEM
Your love affair with object oriented CSS is about to begin
If not, this is the first step toward OOCSS. It could be a grid system you wrote yourself, or one like 960gs, blueprint etc. In fact, I recommend using a responsive grid system.
I probably don’t have to say this... Boilerplate’s CSS works even if you’re not using HTML5 Better than Eric Meyer’s reset.css, which causes problems with Drupal.
Good base styles are particularly important for typography. It may even be worth separating your typographic styles into a separate stylesheet. Border-box is incredibly useful for controlling sizes when needing to use padding and borders. And it works in IE7!
Focus on getting the code right before tackling Drupal’s way Helps me really understand my frontend code before I theme But think of the developers/themers if you’re not the one doing the implementation
Controversial It can feel faster to just style the output and forget about it But this means all the downsides already mentioned will become realities Once classes start going in, the theme falls into place rapidly It is just as fast, and the more you do, the faster it gets
Drupal’s output is currently not very semantic Fortunately this is starting to improve thanks to you guys I find Display Suite a massive help, and it is very simple to learn I output views as HTML Lists and then theme them to add my classes
Notice how it reads like normal language too
The grid-4 class provides the div with its layout styles The theme-a class provides it with its theme Because the base styles for H3s and Ps don’t have colours assigned, they will inherit the colour in the theme
It flexes to the container No extra styling, markup changes or classes needed
CSS authoring frameworks like Compass and preprocessors like SASS and LESS can make life for the frontend dev a lot easier They are also a great way to get your head into Object Oriented CSS (the SCSS syntax is closer to normal CSS so I recommend using that) Variables, mixins, nesting etc can formalise the whole Object Oriented approach Compass Generating vendor prefixes for you is particularly handy!
But for those that aren’t ready to make the move to a new way of authoring CSS, the principles I have been discussing will work right now.
Firebug is generated CSS You have to trace back through to the SASS to fix
Not only is SASS another layer to debug if something isn’t working properly (particularly for cross-browser testing) It can also make things nasty with nested selectors and overrides – the very things OOCSS is trying to avoid.
Also CSS preprocessors shouldn’t just be used to facilitate a new type of lazy coding. I have seen some generated CSS files three times the size of hand-coded ones – that’s over 110Kb or 5,000 lines for a file that could be 35Kb/1,700 lines or so.
