Object oriented css. Graeme Blackwood


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Object oriented css. Graeme Blackwood

    1. 1. Object Oriented CSS Graeme Blackwood Creative Director Deeson Online twitter.com/graemeblackwood
    2. 2. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 2
    3. 3. Graeme BlackwoodCreative Director, Deeson Onlinedeeson-online.co.uk@graemeblackwood
    4. 4. ObjectOrientedCSS
    5. 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. 6. Some misconceptions
    7. 7. OO CSS !=OO ProgrammingBut an OOP mindset can be applied to CSS
    8. 8. OOCSS does notrequire any newertechnologiesIt works in IE6 – no need for CSS3, HTML5 etc
    9. 9. Semantic markup isvery helpful, butusually not essentialSemantic is better though!
    10. 10. The traditional approach to CSS
    11. 11. Style outputas neededEach item / page individually...
    12. 12. Target styles bydrilling downthrough nestedelements
    13. 13. Problems withtraditional CSS
    14. 14. Coding takesa lot longer
    15. 15. It getsbloated
    16. 16. It is difficult to readand hard to reuse
    17. 17. Traditional CSS istough to maintain
    18. 18. Object Oriented CSSA new way of thinking
    19. 19. Separate layout from theme(Use a grid system!)
    20. 20. Separate the containerfrom the content
    21. 21. Look for shared stylesYou will see them everywhere
    22. 22. Why shouldI care?
    23. 23. Reusable code
    24. 24. Fasterdevelopment QuickTime™ and a H.264 decompressor are needed to see this picture.Less effort to code
    25. 25. Easier to maintain
    26. 26. Less code,smaller files
    27. 27. Getting started
    28. 28. Using a grid system?You are already on the right track!
    29. 29. Use a resetstylesheetHTML5 boilerplate’s normalize.css
    30. 30. Set good base stylesTo minimise later overrides* {box­sizing: border­box} is pretty handy
    31. 31. Buildgood base stylesTo Set HTML prototypeswith Drupal in mind...minimise later overrides
    32. 32. Clean up what Drupalthrows at youDon’t just style,theme!
    33. 33. Lose unnecessarymarkup if it affects you Some divs are  totally pointless!
    34. 34. PHP code not for you?I find Drupal modules likeDisplay Suite and Skinr helpful
    35. 35. Check out TWIGWe’re working on making Drupal 8 a lot easier to theme.http://twig.sensiolabs.org/
    36. 36. Don’t be too obsessedwith perfect markupJust enough is ok
    37. 37. “Now, this is just a simulation of what the blocks  will look like once they’re assembled”
    38. 38. Let’s look at some realworld applications...
    39. 39. .block = inherited base styles only.grid-4 = grid class.theme-a = themeclass, H3 and p inherit colour.padded is a class I add to the gridframework for situations like this
    40. 40. <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}
    41. 41. Carousel nav tabsObject is a Drupal menu – UL with a class of .sidebar­menu. Custom jQuery targets the ID.
    42. 42. Also used on a listingAnd it fthe container
    43. 43. 99% of the styles are reused,targeted through .right.sidebar-menu only to flip theactive item
    44. 44. Carousel itemsWith a class of .product­box
    45. 45. Reused on listingpages
    46. 46. Same layout as productlistings and carousel, flexedto image size
    47. 47. What aboutSASS and LESS?Why bother with presentational classes in markup anymore?
    48. 48. Not everyone wants to use a CSS preprocessorAnd the mindset of reduce, reuse & recycle is just as important even with one
    49. 49. Use SASS wisely – it’sanother layer to debug
    50. 50. Be particularly carefulwith nested selectorshttp://thesassway.com/beginner/the­inception­rulehttp://37signals.com/svn/posts/3003­css­taking­control­of­the­cascade
    51. 51. Disregarding the otherprinciples of OOCSS maycreate pain laterYou could end up with generated CSS bloated even more than if you had hand­coded it
    52. 52. 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
    53. 53. 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
    54. 54. Спасибо за вниманиеВопросы? Graeme Blackwood Creative Director Deeson Online @graemeblackwood
    55. 55. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 60