mobile-first oocss, sass & compass at bbc responsive news
TRANSCRIPT
![Page 1: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/1.jpg)
CSS? Easy!For a simple, maintainable, and sexy code.
With extra bits of Sass
![Page 2: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/2.jpg)
Let's talk about:
CSSSassCompassCats
![Page 3: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/3.jpg)
Bonjour
Je m’appelle Kaelig2007-2012: front-ender in a French web agencyFront-ender @responsivenews since May 2012
![Page 4: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/4.jpg)
![Page 5: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/5.jpg)
It’s been a long journey
![Page 6: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/6.jpg)
Veeeery long…
![Page 7: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/7.jpg)
Nowadays
![Page 8: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/8.jpg)
CSS3
![Page 9: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/9.jpg)
border-radius
![Page 10: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/10.jpg)
border-image
![Page 11: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/11.jpg)
css gradients
![Page 12: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/12.jpg)
text-shadow
![Page 13: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/13.jpg)
box-shadow
![Page 14: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/14.jpg)
(animated octospider)
![Page 15: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/15.jpg)
(animated octospider)
![Page 16: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/16.jpg)
Coloursblack : black#000 : blackrgba(0, 0, 0, 1) : blackhsl(0, 0, 0) : blackhsla(0, 0, 0, 1) : black
![Page 17: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/17.jpg)
@font-face
FreedomTypographic
![Page 18: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/18.jpg)
SelectorsE::before E::afterE:nth-child()E[foo=bar]E#♥
http://www.w3.org/TR/css3-selectors/#selectors
![Page 19: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/19.jpg)
More powerfulPrettierMore complex
CSS today is:
![Page 20: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/20.jpg)
What we are interested in:CSS code
![Page 21: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/21.jpg)
What we are interested in:CSS code
![Page 22: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/22.jpg)
How we write and maintain our CSS
What we are interested in:CSS code
![Page 23: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/23.jpg)
Responsive NewsMany developersIterative processMany branchesLoads of CSS files
![Page 24: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/24.jpg)
Also…Everyone has his habits
.camelCase
.dash-lowercase
.under_scorebrackets, indentation…Multi Line vs single line formatting
Class names can sometimes be very obscure
![Page 25: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/25.jpg)
complexity = iterations × developers × files
WTF
Complexity
![Page 26: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/26.jpg)
OOCSSmore than a framework: a philosophyseparate structure / skinseparate form / contentone class = one purpose
https://github.com/stubbornella/oocss/wiki
![Page 27: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/27.jpg)
Simple example
.btn.btn-primary
.btn
button.btninput.btn.btn-info
a.btn.btn-successdiv.btn.btn-danger
![Page 28: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/28.jpg)
Why OOCSS ?
Code reusabilityHTML FlexibilityRendering performancesJumping in the project is easier
![Page 29: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/29.jpg)
DRYDon't Repeat YourselfOOCSS can help usdon't reinvent the wheelBut… CSS is not DRY by essenceWe need better tools!
![Page 31: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/31.jpg)
KISSKeep It Simple
…and Sexy
![Page 32: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/32.jpg)
![Page 33: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/33.jpg)
Nested selectors#navbar { width: 80%; height: 23px;
ul { list-style-type: none; } li { float: left; a { font-weight: bold; } }}
#navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; }
a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; }}
a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; }
![Page 34: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/34.jpg)
Don't overdo it
By @danscotton
![Page 35: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/35.jpg)
Variables$main-color: #ce4dd6;$style: solid;
#navbar { border-bottom: { color: $main-color; style: $style; }}
a { color: $main-color; &:hover { border-bottom: $style 1px; }}
#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; }
a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }
![Page 36: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/36.jpg)
Functions & operations#navbar { $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6;
width: $navbar-width; border-bottom: 2px solid $navbar-color;
li { float: left; width: $navbar-width/$items - 10px;
background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } }}
#navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; }
![Page 37: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/37.jpg)
Mixins@mixin error { border: 1px #f00; background-color: #fdd;}.error { @include error;}.serious-error { @include error; border-width: 3px; font-size: 3em;}
Reusable chunks of codeDry source, but…Compiles to more code
![Page 38: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/38.jpg)
Extend an object
.error { border: 1px #f00; background-color: #fdd;}.serious-error { border-width: 3px;}
<div class="error serious-error"> Oh no! You've been hacked!</div>
.error { border: 1px #f00; background-color: #fdd;}.serious-error { @extend .error; border-width: 3px;}
<div class="serious-error"> Oh no! You've been hacked!</div>
Before After
.error, .serious-error { border: 1px #f00; background-color: #fdd;}.serious-error { border-width: 3px;}
![Page 39: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/39.jpg)
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); } }}
![Page 40: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/40.jpg)
Consequencesbetter readabilitywell organisedless codeeasier to maintainless aspirins to ingest
![Page 41: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/41.jpg)
![Page 42: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/42.jpg)
.avoid { .nesting { .like { a { .mad { .cow { /* Code here */ } } } } }}
![Page 43: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/43.jpg)
Compiles to:.avoid .nesting .like a .mad .cow { /* Code here */}
Inception rule: don’t go deeper than 3 or 4 selectorsReal impact on maintainability, reusability and performance
![Page 44: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/44.jpg)
3 rules of thumb
Avoid nesting selectors too deeplyAvoid !important at all costs unless you really know what you are doingTry not to write any CSS if you can: Rely on the existing component library
![Page 46: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/46.jpg)
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-default { @include single-box-shadow; }
#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;}
![Page 47: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/47.jpg)
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);
![Page 48: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/48.jpg)
image helpersCheck if logo.png exists (or throws a compilation error):
background: image-url('logo.png');
width: image-width('logo.png');height: image-height('logo.png');
Be lazy, let Compass find dimensions for you:
![Page 49: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/49.jpg)
Also:transitionstransformsanimationsmany more cross-browser css3 helpersvertical rhythm
![Page 50: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/50.jpg)
PluginsSusy (responsive grids)960gsTwitter Bootstrap320andUpformalize…
![Page 51: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/51.jpg)
+Syntax & compilation
CSS3, sprites, plugins…
![Page 52: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/52.jpg)
With Sass & Compass
The machine is writing code,not your fingers (be lazy)less cross-browser debuggingmore time to learn new exciting stuff☛ become a better developer
![Page 53: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/53.jpg)
How we use it
![Page 54: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/54.jpg)
![Page 55: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/55.jpg)
Modular architecture@import 'base',
'styleguide/colors', 'styleguide/helpers', 'styleguide/reset',
'styleguide/typography', 'styleguide/live-icons',
'patterns/ui', 'patterns/articles', 'patterns/timeline-unit/core',
'views/core',
'features/story-list/core', …
Compiles to onlyone HTTP request
core.scss
![Page 56: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/56.jpg)
Mobile first with Sass
![Page 57: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/57.jpg)
Import partialstopic/_core.scss
topic/_compact.scss topic/_tablet.scss
topic/_wide.scss
![Page 58: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/58.jpg)
Media variables@if $core { … }
@if $compact { … } @if $tablet { … }
@if $wide { … }
![Page 59: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/59.jpg)
Mix of both approachesAmazing tools to refactorPremature optimisation is the root of all evil: start simple, refactor later
More importantlyOur users should only download what they need (use the inspector to spot duplicated styles)
![Page 60: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/60.jpg)
Progressive enhancement
@font-face + Sass.arrow { background: url('sprite.png') …; .ff & { background: none; content: " \FF01"; font-family: GelIcons; }}
![Page 61: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/61.jpg)
Coding conventions
Always be consistentwithin 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
![Page 62: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/62.jpg)
Wrapping it upWe write less codeWe are always looking for ways to write even less CSS codeSimple code is better than clever code:don't overuse SassWrite for the others
![Page 63: Mobile-first OOCSS, Sass & Compass at BBC Responsive News](https://reader037.vdocuments.net/reader037/viewer/2022102815/554bea5eb4c9056b348b4eba/html5/thumbnails/63.jpg)
Merci !github.com/kaelig @kaelig
http://octodex.github.com
Octocats from: