mobile-first oocss, sass & compass at bbc responsive news
TRANSCRIPT
CSS? Easy!For a simple, maintainable, and sexy code.
With extra bits of Sass
Let's talk about:
CSSSassCompassCats
Bonjour
Je m’appelle Kaelig2007-2012: front-ender in a French web agencyFront-ender @responsivenews since May 2012
It’s been a long journey
Veeeery long…
Nowadays
CSS3
border-radius
border-image
css gradients
text-shadow
box-shadow
(animated octospider)
(animated octospider)
Coloursblack : black#000 : blackrgba(0, 0, 0, 1) : blackhsl(0, 0, 0) : blackhsla(0, 0, 0, 1) : black
@font-face
FreedomTypographic
SelectorsE::before E::afterE:nth-child()E[foo=bar]E#♥
http://www.w3.org/TR/css3-selectors/#selectors
More powerfulPrettierMore complex
CSS today is:
What we are interested in:CSS code
What we are interested in:CSS code
How we write and maintain our CSS
What we are interested in:CSS code
Responsive NewsMany developersIterative processMany branchesLoads of CSS files
Also…Everyone has his habits
.camelCase
.dash-lowercase
.under_scorebrackets, indentation…Multi Line vs single line formatting
Class names can sometimes be very obscure
complexity = iterations × developers × files
WTF
Complexity
OOCSSmore than a framework: a philosophyseparate structure / skinseparate form / contentone class = one purpose
https://github.com/stubbornella/oocss/wiki
Simple example
.btn.btn-primary
.btn
button.btninput.btn.btn-info
a.btn.btn-successdiv.btn.btn-danger
Why OOCSS ?
Code reusabilityHTML FlexibilityRendering performancesJumping in the project is easier
DRYDon't Repeat YourselfOOCSS can help usdon't reinvent the wheelBut… CSS is not DRY by essenceWe need better tools!
KISSKeep It Simple
…and Sexy
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; }
Don't overdo it
By @danscotton
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; }
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; }
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
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;}
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); } }}
Consequencesbetter readabilitywell organisedless codeeasier to maintainless aspirins to ingest
.avoid { .nesting { .like { a { .mad { .cow { /* Code here */ } } } } }}
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
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
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;}
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);
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:
Also:transitionstransformsanimationsmany more cross-browser css3 helpersvertical rhythm
PluginsSusy (responsive grids)960gsTwitter Bootstrap320andUpformalize…
+Syntax & compilation
CSS3, sprites, plugins…
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
How we use it
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
Mobile first with Sass
Import partialstopic/_core.scss
topic/_compact.scss topic/_tablet.scss
topic/_wide.scss
Media variables@if $core { … }
@if $compact { … } @if $tablet { … }
@if $wide { … }
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)
Progressive enhancement
@font-face + Sass.arrow { background: url('sprite.png') …; .ff & { background: none; content: " \FF01"; font-family: GelIcons; }}
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
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
Merci !github.com/kaelig @kaelig
http://octodex.github.com
Octocats from: