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, Deeson Online deeson-online.co.uk @graemeblackwood
- 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!
- 7. OO CSS != OO Programming But an OOP mindset can be applied to CSS
- 8. OOCSS does not require any newer technologies It works in IE6 – no need for CSS3, HTML5 etc
- 9. Semantic markup is very helpful, but usually not essential Semantic is better though!
- 10. The traditional approach to CSS
- 12. Target styles by drilling down through nested elements
- 14. Coding takes a lot longer
- 15. It gets bloated
- 16. It is difficult to read and hard to reuse
- 17. Traditional CSS is tough to maintain
- 20. Separate layout from theme(Use a grid system!)
- 21. Separate the container from the content
- 22. Look for shared styles You will see them everywhere
- 24. Reusable code
- 26. Faster development QuickTime™ and a H.264 decompressor are needed to see this picture. Less effort to code
- 31. Getting started
- 32. Using a grid system? You are already on the right track!
- 34. Set good base styles To minimise later overrides * {boxsizing: borderbox} is pretty handy
- 35. Buildgood base stylesTo Set HTML prototypeswith Drupal in mind... minimise later overrides
- 36. Clean up what Drupal throws at you Don’t just style, theme!
- 37. Lose unnecessary markup if it affects you Some divs are totally pointless!
- 38. PHP code not for you? I find Drupal modules like Display Suite and Skinr helpful
- 40. Don’t be too obsessed 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 at some real world applications...
- 43. .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
- 44. <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 }
- 46. Also used on a listingAnd it f the container
- 47. 99% of the styles are reused, targeted through .right .sidebar-menu only to flip the active item
- 50. Same layout as product listings and carousel, flexed to image size
- 51. What about SASS and LESS? Why bother with presentational classes in markup anymore?
- 52. Not everyone wants to 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 with nested selectors http://thesassway.com/beginner/theinceptionrule http://37signals.com/svn/posts/3003csstakingcontrolofthecascade
- 56. Disregarding the other principles of OOCSS may create pain later You could end up with generated CSS bloated even more than if you had handcoded it
- 57. 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
- 58. 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
- 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.