Download to read offline
More Related Content
Similar to Object oriented css graeme blackwood
Object oriented css graeme blackwood
- 1. Object Oriented CSS Graeme Blackwood Creative Director Deeson Online twitter.com/graemeblackwood
- 2. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 2
- 3. Graeme Blackwood Creative Director, DeesonOnline deeson-online.co.uk @graemeblackwood
- 4.
- 5. Props • 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!
- 6.
- 7. OO CSS != OOProgramming But an OOP mindset can be applied to CSS
- 8. OOCSS does not requireany newer technologies It works in IE6 – no need for CSS3, HTML5 etc
- 9. Semantic markup is veryhelpful, but usually not essential Semantic is better though!
- 10.
- 11.
- 12. Target styles by drillingdown through nested elements
- 13.
- 14. Coding takes a lotlonger
- 15.
- 16. It is difficultto read and hard to reuse
- 17. Traditional CSS is toughto maintain
- 19.
- 20. Separate layout fromtheme(Use a grid system!)
- 21. Separate the container fromthe content
- 22. Look for sharedstyles You will see them everywhere
- 23.
- 24.
- 26. Faster development QuickTime™ and a H.264 decompressor are needed to see this picture. Less effort to code
- 27.
- 30.
- 31.
- 32. Using a gridsystem? You are already on the right track!
- 33.
- 34. Set good basestyles To minimise later overrides * {boxsizing: borderbox} is pretty handy
- 35. Build HTMLbase stylesTo Setgood prototypeswith Drupal in mind... minimise later overrides
- 36. Clean up whatDrupal throws at you Don’t just style, theme!
- 37. Lose unnecessary markup ifit affects you Some divs are totally pointless!
- 38. PHP code notfor you? I find Drupal modules like Display Suite and Skinr helpful
- 39.
- 40. Don’t be tooobsessed with perfect markup Just enough is ok
- 41. “Now, this is just a simulation of what the blocks will look like once they’re assembled”
- 42. Let’s look atsome real world applications...
- 43. .block = inheritedbase 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-ablock”> <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 }
- 45.
- 46. Also used ona listingAnd it to the container
- 47. 99% of thestyles are reused, targeted through .right .sidebar-menu only to flip the active item
- 48.
- 49.
- 50. Same layout asproduct listings and carousel, flexed to image size
- 51. What about SASS andLESS? Why bother with presentational classes in markup anymore?
- 52. Not everyone wantsto use a CSS preprocessorAnd the mindset of reduce, reuse & recycle is just as important even with one
- 53. Use SASS wisely– it’s another layer to debug
- 54. Be particularly careful withnested selectors http://thesassway.com/beginner/theinceptionrule http://37signals.com/svn/posts/3003csstakingcontrolofthecascade
- 56. Disregarding the other principlesof OOCSS may create pain later You could end up with generated CSS bloated even more than if you had handcoded it
- 57. Summary • OOCSS isas 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 preprocessorslike 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
- 59. Спасибо за внимание Вопросы? Graeme Blackwood Creative Director Deeson Online @graemeblackwood
- 60. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 60
Editor's Notes
- #17 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
- #19 So what’s the solution?
- #20 What does this involve?
- #30 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
- #31 CEM
- #32 Your love affair with object oriented CSS is about to begin
- #33 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.
- #34 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.
- #35 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!
- #36 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
- #37 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
- #38 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
- #44 Notice how it reads like normal language too
- #45 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
- #47 It flexes to the container No extra styling, markup changes or classes needed
- #52 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!
- #53 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.
- #54 Firebug is generated CSS You have to trace back through to the SASS to fix
- #55 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.
- #57 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.