Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood

Graeme Blackwood Creative Director, Deeson Online Graeme Blackwood Creative Director, Deeson Online

Object Oriented CSS

Props Nicole Sullivan, Jonathan Snook (SMACSS), Everyone at Chris Eppstein, Kevin Poulton And loads more!

Some misconceptions

OO CSS != OO Programming But an OOP mindset can be applied to CSS OO CSS != OO Programming But an OOP mindset can be applied to CSS

OOCSS does not require any newer technologies It works in IE6 – no need for CSS3, HTML5 etc OOCSS does not require any newer technologies It works in IE6 – no need for CSS3, HTML5 etc

Semantic markup is very helpful, but usually not essential Semantic is better though! Semantic markup is very helpful, but usually not essential Semantic is better though!

The traditional approach to CSS

Style output as needed Each item / page individually...

Target styles by drilling down through nested elements

Problems with traditional CSS

Coding takes a lot longer

It gets bloated

It is difficult to read and hard to reuse

Traditional CSS is tough to maintain

‽

Object Oriented CSS A new way of thinking

Separate layout from theme (Use a grid system!)

Separate the container from the content

Look for shared styles You will see them everywhere

Why should I care?

Reusable code

Faster development Less effort to code

Easier to maintain

Less code, smaller files

Getting started

Using a grid system? You are already on the right track!

Use a reset stylesheet HTML5 boilerplate’s normalize.css

Set good base styles To minimise later overrides * {box-sizing: border-box} is pretty handy

Set good base styles To minimise later overrides Build HTML prototypes with Drupal in mind...

Clean up what Drupal throws at you Don’t just style, theme!

Lose unnecessary markup if it affects you Some divs are totally pointless!

PHP code not for you? I find Drupal modules like Display Suite and Skinr helpful

Check out TWIG We’re working on making Drupal 8 a lot easier to theme. Check out TWIG We’re working on making Drupal 8 a lot easier to theme.

Don’t be too obsessed with perfect markup Just enough is ok

“Now, this is just a simulation of what the blocks will look like once they’re assembled”

Let’s look at some real world applications...

.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

Block title Hello world!.grid-4 comes from your grid framework.theme-a { background-color: #580174; border-radius: 6px; color: #fff; //H3 and p inherit this }

Carousel nav tabs Object is a Drupal menu – UL with a class of.sidebar-menu. Custom jQuery targets the ID.

Also used on a listing And it flexes to the container

99% of the styles are reused, targeted through.right.sidebar-menu only to flip the active item

Carousel items With a class of.product-box

Reused on listing pages

Same layout as product listings and carousel, flexed to image size

What about SASS and LESS? Why bother with presentational classes in markup anymore?

Not everyone wants to use a CSS preprocessorAnd the mindset of reduce, reuse & recycle is just as important even with one

Use SASS wisely – it’s another layer to debug

Be particularly careful with nested selectors cascade cascade Be particularly careful with nested selectors cascade cascade

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

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 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

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 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

Спасибо за внимание Вопросы? Creative Director Deeson Graeme Blackwood

@graemeblackwood Вопросы? Спасибо за внимание Most of the fantastic lego images were by Kevin Poulton