Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile-first OOCSS, Sass & Compass at BBC Responsive News

2,367 views

Published on

  • Be the first to comment

Mobile-first OOCSS, Sass & Compass at BBC Responsive News

  1. 1. CSS? Easy!For a simple, maintainable, and sexy code. i t h e x t ra b i ts of S as s W
  2. 2. Lets talk about: CSS Sass Compass Cats
  3. 3. BonjourJe m’appelle Kaelig2007-2012: front-ender in a Frenchweb agencyFront-ender @responsivenews sinceMay 2012
  4. 4. It’s been a long journey
  5. 5. Veeeery long…
  6. 6. Nowadays
  7. 7. CSS3
  8. 8. border-radius
  9. 9. border-image
  10. 10. css gradients
  11. 11. text-shadow
  12. 12. box-shadow
  13. 13. (animated octospider)
  14. 14. (animated octospider)
  15. 15. Coloursblack : black#000 : blackrgba(0, 0, 0, 1) : blackhsl(0, 0, 0) : blackhsla(0, 0, 0, 1) : black
  16. 16. @font-faceTypographic Freedom
  17. 17. Selectors E::before E::after E:nth-child() E[foo=bar] E#♥http://www.w3.org/TR/css3-selectors/#selectors
  18. 18. CSS today is: More powerful Prettier More complex
  19. 19. What we are interested in: CSS code
  20. 20. What we are interested in: CSS code
  21. 21. What we are interested in: CSS code Ho w w e wri te a n d main t ain o u r CSS
  22. 22. Responsive NewsMany developersIterative processMany branchesLoads of CSS files
  23. 23. Also…Everyone has his habits .camelCase .dash-lowercase .under_score brackets, indentation… Multi Line vs single line formattingClass names can sometimes be very obscure
  24. 24. complexity = iterations × developers × filesWTF Complexity
  25. 25. OOCSS more than a framework: a philosophy separate structure / skin separate form / content one class = one purposehttps://github.com/stubbornella/oocss/wiki
  26. 26. Simple example .btn.btn.btn-primary button.btn a.btn.btn-success input.btn.btn-info div.btn.btn-danger
  27. 27. Why OOCSS ?Code reusabilityHTML FlexibilityRendering performancesJumping in the project is easier
  28. 28. DRYDont Repeat YourselfOOCSS can help usdont reinvent the wheelBut… CSS is not DRY by essenceWe need better tools!
  29. 29. gem install sasshttp://sass-lang.com/
  30. 30. KISSKeep It Simple … and Sexy
  31. 31. Nested selectors#navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; } li { #navbar li { float: left; float: left; } a { font-weight: bold; } #navbar li a { } font-weight: bold; }} a {a { color: #ce4dd6; } color: #ce4dd6; a:hover { &:hover { color: #ffb3ff; } color: #ffb3ff; } &:visited { color: #c458cb; } a:visited {} color: #c458cb; }
  32. 32. Dont overdo it By @danscotton
  33. 33. Variables$main-color: #ce4dd6;$style: solid;#navbar { #navbar { border-bottom: { border-bottom-color: #ce4dd6; color: $main-color; border-bottom-style: solid; } style: $style; } a {} color: #ce4dd6; } a:hover {a { border-bottom: solid 1px; } color: $main-color; &:hover { border-bottom: $style 1px; }}
  34. 34. Functions & operations#navbar { #navbar { $navbar-width: 800px; width: 800px; $items: 5; border-bottom: 2px solid #ce4dd6; } $navbar-color: #ce4dd6; #navbar li { float: left; width: $navbar-width; width: 150px; border-bottom: 2px solid $navbar-color; background-color: #e5a0e9; } #navbar li:hover { li { background-color: #d976e0; } float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
  35. 35. Mixins@mixin error { border: 1px #f00; background-color: #fdd;} Reusable chunks of code.error { @include error; Dry source, but…}.serious-error { @include error; Compiles to more code border-width: 3px; font-size: 3em;}
  36. 36. Extend an object Before After<div class="error serious-error"> <div class="serious-error"> Oh no! Youve been hacked! Oh no! Youve been hacked!</div> </div>.error { .error { .error, .serious-error { border: 1px #f00; border: 1px #f00; border: 1px #f00; background-color: #fdd; background-color: #fdd; background-color: #fdd; } }} .serious-error { .serious-error {.serious-error { @extend .error; border-width: 3px; border-width: 3px; } border-width: 3px; }}
  37. 37. Media Queries.body-narrow-width { @media (min-width: 480px) { &.media-portrait { width: span(5); } &.media-landscape { @include pullout; width: span(7); } } @media (min-width: 640px) { &.media-landscape { width: span(5); } }}
  38. 38. Consequencesbetter readabilitywell organisedless codeeasier to maintainless aspirins to ingest
  39. 39. .avoid { .nesting { .like { a { .mad { .cow { /* Code here */ } } } } }}
  40. 40. Compiles to:.avoid .nesting .like a .mad .cow { /* Code here */} Inception rule: don’t go deeper than 3 or 4 selectors Real impact on maintainability, reusability and performance
  41. 41. 3 rules of thumbAvoid nesting selectors too deeplyAvoid !important at all costs unless youreally know what you are doingTry not to write any CSS if you can:Rely on the existing component library
  42. 42. gem install compasshttp://compass-style.org/
  43. 43. box-shadow #box-shadow-default {   @include single-box-shadow; } #box-shadow-custom {   @include box-shadow(red 2px 2px 10px); }#box-shadow-custom-multiple {  @include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }#box-shadow-custom-multiple { -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; -o-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset; box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;}
  44. 44. CSS3 gradients #linear-gradient {   @include background-image(linear-gradient(left top, white, #dddddd)); } background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd); background-image: -moz-linear-gradient(left top, #ffffff, #dddddd); background-image: -o-linear-gradient(left top, #ffffff, #dddddd); background-image: -ms-linear-gradient(left top, #ffffff, #dddddd); background-image: linear-gradient(left top, #ffffff, #dddddd); #svg-gradient {   $experimental-support-for-svg: true;   @include background-image(linear-gradient(left, #2ac363, #cd8c14, #9c4cc2)); } background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2)); background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -ms-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
  45. 45. image helpersCheck if logo.png exists (or throws a compilation error): background: image-url(logo.png); Be lazy, let Compass find dimensions for you: width: image-width(logo.png); height: image-height(logo.png);
  46. 46. Also:transitionstransformsanimationsmany more cross-browser css3 helpersvertical rhythm
  47. 47. PluginsSusy (responsive grids)960gsTwitter Bootstrap320andUpformalize…
  48. 48. Syntax & compilation + CSS3, sprites, plugins…
  49. 49. With Sass & CompassThe machine is writing code,not your fingers (be lazy)less cross-browser debuggingmore time to learn new exciting stuff☛ become a better developer
  50. 50. How we use it
  51. 51. Modular architecture @import base, styleguide/colors, styleguide/helpers,core.scss styleguide/reset, styleguide/typography,Compiles to only styleguide/live-icons,one HTTP request patterns/ui, patterns/articles, patterns/timeline-unit/core, views/core, features/story-list/core, …
  52. 52. Mobile first with Sass
  53. 53. Import partials topic/_core.scss topic/_tablet.scsstopic/_compact.scss topic/_wide.scss
  54. 54. Media variables @if $core { … } @if $tablet { … }@if $compact { … } @if $wide { … }
  55. 55. Mix of both approaches Amazing tools to refactor Premature optimisation is the root of all evil: start simple, refactor later More importantly Our users should only download what they need (use the inspector to spot duplicated styles)
  56. 56. Progressive enhancement@font-face + Sass.arrow { background: url(sprite.png) …; .ff & { background: none; content: " FF01"; font-family: GelIcons; }}
  57. 57. Coding conventions Always be consistent within a given context Code is a communication tool. If you make spelling mistakes and typos in a letter, your message will be harder to understand by your reader.Our coding conventions: http://git.io/kcc
  58. 58. Wrapping it upWe write less codeWe are always looking for ways towrite even less CSS codeSimple code is better than clever code:dont overuse SassWrite for the others
  59. 59. Merci !github.com/kaelig @kaelig Octocats from: http://octodex.github.com

×