Object oriented css. Graeme Blackwood
Upcoming SlideShare
Loading in...5
×
 

Object oriented css. Graeme Blackwood

on

  • 1,379 views

 

Statistics

Views

Total Views
1,379
Views on SlideShare
552
Embed Views
827

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 827

http://drupaler.ru 714
http://www.drupaler.ru 113

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Object oriented css. Graeme Blackwood Presentation Transcript

  • Object Oriented CSS Graeme Blackwood Creative Director Deeson Online twitter.com/graemeblackwood
  • Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 2
  • Graeme BlackwoodCreative Director, Deeson Onlinedeeson-online.co.uk@graemeblackwood View slide
  • ObjectOrientedCSS View slide
  • 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!
  • Some misconceptions
  • OO CSS !=OO ProgrammingBut an OOP mindset can be applied to CSS
  • OOCSS does notrequire any newertechnologiesIt works in IE6 – no need for CSS3, HTML5 etc
  • Semantic markup isvery helpful, butusually not essentialSemantic is better though!
  • The traditional approach to CSS
  • Style outputas neededEach item / page individually...
  • Target styles bydrilling downthrough nestedelements
  • Problems withtraditional CSS
  • Coding takesa lot longer
  • It getsbloated
  • It is difficult to readand hard to reuse
  • Traditional CSS istough to maintain
  • Object Oriented CSSA new way of thinking
  • Separate layout from theme(Use a grid system!)
  • Separate the containerfrom the content
  • Look for shared stylesYou will see them everywhere
  • Why shouldI care?
  • Reusable code
  • Fasterdevelopment QuickTime™ and a H.264 decompressor are needed to see this picture.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 resetstylesheetHTML5 boilerplate’s normalize.css
  • Set good base stylesTo minimise later overrides* {box­sizing: border­box} is pretty handy
  • Buildgood base stylesTo Set HTML prototypeswith Drupal in mind...minimise later overrides
  • Clean up what Drupalthrows at youDon’t just style,theme!
  • Lose unnecessarymarkup if it affects you Some divs are  totally pointless!
  • PHP code not for you?I find Drupal modules likeDisplay Suite and Skinr helpful
  • Check out TWIGWe’re working on making Drupal 8 a lot easier to theme.http://twig.sensiolabs.org/
  • Don’t be too obsessedwith perfect markupJust 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 realworld applications...
  • .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
  • <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 fthe container
  • 99% of the styles are reused,targeted through .right.sidebar-menu only to flip theactive item
  • Carousel itemsWith a class of .product­box
  • Reused on listingpages
  • Same layout as productlistings and carousel, flexedto image size
  • 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 one
  • Use SASS wisely – it’sanother layer to debug
  • Be particularly carefulwith nested selectorshttp://thesassway.com/beginner/the­inception­rulehttp://37signals.com/svn/posts/3003­css­taking­control­of­the­cascade
  • Disregarding the otherprinciples of OOCSS maycreate pain laterYou could end up with generated CSS bloated even more than if you had hand­coded it
  • 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
  • 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
  • Спасибо за вниманиеВопросы? Graeme Blackwood Creative Director Deeson Online @graemeblackwood
  • Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор 60