Download - Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood
![Page 1: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/1.jpg)
Object Oriented CSS
Creative Director
Deeson Online
twitter.com/graemeblackwood
Graeme Blackwood
![Page 2: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/2.jpg)
Graeme Blackwood Creative Director, Deeson Online
deeson-online.co.uk @graemeblackwood
Graeme Blackwood Creative Director, Deeson Online
deeson-online.co.uk @graemeblackwood
![Page 3: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/3.jpg)
Object Oriented CSS
Object Oriented CSS
![Page 4: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/4.jpg)
PropsProps• Nicole Sullivan, http://www.stubbornella.org
• Jonathan Snook (SMACSS), http://smacss.com
• Everyone at http://thesassway.com
• Chris Eppstein, http://compass-style.org
• Kevin Poulton http://www.flickr.com/photos/kevinpoulton
• And loads more!
![Page 5: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/5.jpg)
Some misconceptions
Some misconceptions
![Page 6: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/6.jpg)
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
![Page 7: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/7.jpg)
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
![Page 8: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/8.jpg)
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!
![Page 9: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/9.jpg)
The traditional approach to CSSThe traditional
approach to CSS
![Page 10: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/10.jpg)
Style output as needed Each item / page individually...
Style output as needed Each item / page individually...
![Page 11: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/11.jpg)
Target styles by drilling down through nested elements
![Page 12: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/12.jpg)
Problems with traditional CSS
![Page 13: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/13.jpg)
Coding takes a lot longer
![Page 14: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/14.jpg)
It gets bloated
![Page 15: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/15.jpg)
It is difficult to read and hard to reuse
![Page 16: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/16.jpg)
Traditional CSS is tough to maintain
![Page 17: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/17.jpg)
‽
![Page 18: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/18.jpg)
Object Oriented CSSA new way of thinking
![Page 19: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/19.jpg)
Separate layout from theme(Use a grid system!)
![Page 20: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/20.jpg)
Separate the container from the content
![Page 21: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/21.jpg)
Look for shared stylesYou will see them everywhere
![Page 22: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/22.jpg)
Why should I care?
Why should I care?
![Page 23: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/23.jpg)
Reusable code
![Page 24: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/24.jpg)
![Page 25: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/25.jpg)
QuickTime™ and aH.264 decompressor
are needed to see this picture.
Faster development
Less effort to code
![Page 26: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/26.jpg)
Easier to maintain
![Page 27: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/27.jpg)
![Page 28: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/28.jpg)
![Page 29: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/29.jpg)
Less code,smaller files
![Page 30: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/30.jpg)
Getting started
![Page 31: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/31.jpg)
Using a grid system?You are already on the right track!
![Page 32: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/32.jpg)
Use a reset stylesheetHTML5 boilerplate’s normalize.css
![Page 33: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/33.jpg)
Set good base stylesTo minimise later overrides
* {box-sizing: border-box} is pretty handy
![Page 34: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/34.jpg)
Set good base stylesTo minimise later overrides
Build HTML prototypeswith Drupal in mind...
![Page 35: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/35.jpg)
Clean up what Drupal throws at youDon’t just style,theme!
![Page 36: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/36.jpg)
Lose unnecessary markup if it affects you
Some divs are totally pointless!
![Page 37: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/37.jpg)
PHP code not for you?
I find Drupal modules likeDisplay Suite and Skinr helpful
PHP code not for you?
I find Drupal modules likeDisplay Suite and Skinr helpful
![Page 38: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/38.jpg)
Check out TWIG
We’re working on making Drupal 8 a lot easier to theme.
http://twig.sensiolabs.org/
Check out TWIG
We’re working on making Drupal 8 a lot easier to theme.
http://twig.sensiolabs.org/
![Page 39: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/39.jpg)
Don’t be too obsessed with perfect markup
Just enough is ok
![Page 40: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/40.jpg)
“Now, this is just a simulation of what the blocks will look like once they’re assembled”
![Page 41: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/41.jpg)
Let’s look at some real world applications...
Let’s look at some real world applications...
![Page 42: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/42.jpg)
.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
![Page 43: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/43.jpg)
<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}
![Page 44: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/44.jpg)
Carousel nav tabsObject is a Drupal
menu – UL with a class of .sidebar-menu. Custom jQuery targets the ID.
![Page 45: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/45.jpg)
Also used on a listingAnd it flexes to the container
![Page 46: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/46.jpg)
99% of the styles are reused, targeted through .right .sidebar-menu only to flip the active item
![Page 47: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/47.jpg)
Carousel itemsWith a class of .product-box
![Page 48: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/48.jpg)
Reused on listing pages
![Page 49: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/49.jpg)
Same layout as product listings and carousel, flexed to image size
![Page 50: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/50.jpg)
What aboutSASS and LESS?
Why bother with presentational classes in markup anymore?
What aboutSASS and LESS?
Why bother with presentational classes in markup anymore?
![Page 51: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/51.jpg)
Not everyone wants to use a CSS preprocessorAnd the mindset of reduce, reuse & recycle is just as important even with oneNot everyone wants to use a CSS preprocessorAnd the mindset of reduce, reuse & recycle is just as important even with one
![Page 52: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/52.jpg)
Use SASS wisely – it’s another layer to debug
Use SASS wisely – it’s another layer to debug
![Page 53: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/53.jpg)
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
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
![Page 54: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/54.jpg)
![Page 55: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/55.jpg)
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
![Page 56: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/56.jpg)
SummarySummary• 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
![Page 57: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/57.jpg)
SummarySummary
• 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
![Page 58: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/58.jpg)
Спасибо за внимание
Вопросы?
Creative Director
Deeson Online
@graemeblackwood
Graeme Blackwood
![Page 59: Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood](https://reader035.vdocument.in/reader035/viewer/2022081603/56649e0f5503460f94afa0dd/html5/thumbnails/59.jpg)
@graemeblackwood
Вопросы?Вопросы?
Спасибо за вниманиеСпасибо за внимание
Most of the fantastic lego images were by Kevin Poulton http://www.flickr.com/photos/kevinpoulton