Object oriented css graeme blackwood
-
Upload
drupalconf -
Category
Technology
-
view
364 -
download
3
Transcript of Object oriented css graeme blackwood
Object Oriented CSS
Creative Director
Deeson Online
twitter.com/graemeblackwood
Graeme Blackwood
2
Спонсоры
Генеральный спонсор
Серебряный спонсор Серебряный спонсор
Бронзовый спонсор Бронзовый спонсор
Организатор
Graeme
Blackwood Creative Director, Deeson Online
deeson-online.co.uk
@graemeblackwood
Graeme
Blackwood Creative Director, Deeson Online
deeson-online.co.uk
@graemeblackwood
Object Oriented CSS
Object Oriented CSS
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!
Some misconceptions
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 CSSThe traditional
approach to CSS
Style output as needed Each item / page individually...
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 CSSA new way of thinking
Separate layout from theme(Use a grid system!)
Separate the container from the content
Look for shared stylesYou will see them everywhere
Why should I care?
Why should I care?
Reusable code
QuickTime™ and aH.264 decompressor
are needed to see this picture.
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 stylesTo minimise later overrides
* {box-sizing: border-box} is pretty handy
Set good base stylesTo minimise later overrides
Build HTML prototypeswith Drupal in mind...
Clean up what Drupal throws at youDon’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 likeDisplay Suite and Skinr helpful
PHP code not for you?
I find Drupal modules likeDisplay Suite and Skinr helpful
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/
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...
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
<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}
Carousel nav tabsObject is a Drupal
menu – UL with a class of .sidebar-menu. Custom jQuery targets the ID.
Also used on a listingAnd it flexes to the container
99% of the styles are reused, targeted through .right .sidebar-menu only to flip the active item
Carousel itemsWith a class of .product-box
Reused on listing pages
Same layout as product listings and carousel, flexed to image size
What aboutSASS and LESS?
Why bother with presentational classes in markup anymore?
What aboutSASS 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 oneNot 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
Use SASS wisely – it’s another layer to debug
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
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
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
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
Спасибо за внимание
Вопросы?
Creative Director
Deeson Online
@graemeblackwood
Graeme Blackwood
60
Спонсоры
Генеральный спонсор
Серебряный спонсор Серебряный спонсор
Бронзовый спонсор Бронзовый спонсор
Организатор