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!

http://sass-lang.com/

gem install sass

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

http://compass-style.org/

gem install compass

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: