Une architecture 

composée

a propos de moi


.author { name: Hugo Giraudel; location: Grenoble, France; author: SitePoint, CSS-Tricks, The Sass Way, David Walsh Blog, WebDesign Tuts+, HugoGiraudel.com; projects: Browserhacks, SassyStrings, SassyMatrix, SassyJSON, SassyLists, SassyCast, SassySort; twitter: @HugoGiraudel; }

What's wrong with css?


It's old. It's really old.
It can't be changed.
It operates in a global namespace.
It's based on inheritance.
It's very, very loose.
Source order is critical.
The cascade needs managing.
Specificity negates all the above.


- Harry Roberts

CSS preprocessing has won.

- CHRIS EPPSTEIN



La question n'est 

plus si ? mais lequel ?


Forcément...

Mais Sass ne fait pas tout.


(Désolé pour ceux qui y croyaient...)



Agencer

Architecturer

Construire

If you apply sass

without any architecture, 

you wind up with a crazy mess,

like you would if you did 

any language with no architecture.


- Nicole Sullivan



















 1. Structurer un projet 

main.css


Pas très pratique...

main.scss

 

C'est mieux, mais pas plus pratique.

Et si... on divisait ?



plusieurs fichiers en dev

un seul fichier en prod

 Mode bazar  


sass/
|
|- main.scss 
|- layout.scss 
|- typography.scss
|- grid.scss
|- print.scss
|- variables.scss
|- mixins.scss
|- responsive.scss
|- home.scss
|- contact.scss
|- carousel.scss
|- bootstrap.scss

 Mode supermarché  

sass/ 
| 
|– base/ 
|   |– _reset.scss
|   |– _typography.scss
| 
|– components/ 
|   |– _carousel.scss
|   |– _dropdown.scss
| 
|– helpers/ 
|   |– _variables.scss
|   |– _mixins.scss
|   |– _helpers.scss
| 
|– layout/ 
|   |– _grid.scss      
|   |– _header.scss
|   |– _footer.scss
|   |– _sidebar.scss
|
|– pages/ 
|   |– _home.scss
|   |– _contact.scss
|
|– vendors/ 
|   |– _bootstrap.scss
|   |– _jquery-ui.scss
| 
`– main.scss

On segmente autant que nécessaire

du moment que ça a du sens pour le projet.

base/


reset.scss

typography.scss

...

layout/


grid.scss

header.scss

footer.scss

sidebar.scss

...

components/


carousel.scss

navigation.scss

dropdown.scss

buttons.scss

media.scss

thumbnail.scss

...

pages/


home.scss

contact.scss

quizz.scss

...

vendors/


bootstrap.(s)css

jquery-ui.(s)css

...

Utils/


placeholders.scss

functions.scss

variables.scss

helpers.scss

mixins.scss

...

themes/


admin.scss

shop.scss

blog.scss

...

main.scss
 


@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";
 
@import "vendors/bootstrap";
@import "vendors/jquery-ui";
 
@import "base/reset";
@import "base/typography";
 
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
 
@import "components/carousel";
@import "components/buttons";
@import "components/cover";
@import "components/dropdown";
 
@import "pages/home";
@import "pages/contact";

One file to rule them all,

One file to find them,

One file to bring them all,

And in the Sass way merge them.


- J.R.R. Tolkien



















 2. Concevoir des composants

Une interface

=

des fondations

+

des composants

+

un theme

un composant 

=

une structure sémantique

+

Une apparence


composant


précis

indépendant

configurable

maintenable

et si possible portable


Exemples
de composants


messages informatifs


Erreur, merci de faire quelque chose !

Tout est OK, veuillez circuler.

Vous devriez peut-être faire attention.

Petite information...

Système de notation




lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/

STEP WIZARD


  1. Cart
  2. Authentication
  3. Delivery
  4. Payment

configuration


exportable

organisée

maintenable

editable

Tout ce qui est susceptible

 de faire l'objet 

d'une modification 

doit être mis en variable.


Exemple : marges (padding / margin), couleurs, bordures, ...

exemple


$slider-space: 1em;
$slider-color: #666;
$slider-border: false;
$slider-speed: 3s;
$slider-transition: 150ms ease-in-out;

Map Sass 3.3


$slider: (
  space: 1em,
  color: #666,
  border: false,
  speed: 3s,
  transition: 150ms ease-in-out
);

Attention à l'excès 


$overflow: hidden;
$white-space: pre;
$float: left;
$color: #333;
$font-size: 1.2em;
$border: 1px solid;
    
.element {
  overflow: $overflow;
  white-space: $white-space;
  float: $float;
  color: $color;
  font-size: $font-size;
  border: $border;
}

BEM

Block Element Modifier


.block {
    ...
}

.block--modifier {
    ...
}

.block__element {
    ...
}

.block__element--modifier {
    ...
}

Exemple


.slider {
  overflow: hidden;
  transition: $slider-transition;
}

.slider--home {
  background: $slider-color;
}
    
.slider__slide {
  float: left;
} 

.slider__slide--full {
  background-size: cover;
}

BEM + Sass 3.3


.block {
    ...
    &--modifier {
        ...
    }
    
    &__element {
        ...
    
        &--modifier {
            ...
        }
    }
}

Mais... 


Ca empêche la recherche.

C'est moins lisible.

Decortiquons
un composant

Vous allez voir...

C'est hyper simple !

Mais il faut juste faire attention.

A ne pas faire n'importe quoi !


http://www.sitepoint.com/sass-component-10-minutes/

La configuration 


$message-types: (
  (error    #b94a48)
  (valid    #468847)
  (warning  #c09853)
  (info     #3a87ad)
);


map Sass 3.3


 
$message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
);

Les styles communs 


%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}


Placeholders

==

concatenation des sélecteurs

Les styles spécifiques 


@mixin message($color) {
  // On inclue les styles de base
  @extend %message;
  
  // Puis les styles spécifiques au type
  color: $color;
  border-color: lighten($color, 20%);
  background-color: lighten($color, 40%);
}


Mixins

==

arguments

La génération des styles 


@each $message-type in $message-types {
  $type  : nth($message-type, 1);
  $color : nth($message-type, 2);
 
  .message-#{$type} {
    @include message($color);
  }
}


avec Sass 3.3 


@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

All in one ! 


$message-types: (
  error : #b94a48,
  warn  : #c09853,
  valid : #468847,
  info  : #3a87ad
);
 
%message {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}
 
@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background-color: lighten($color, 38%);
}
 
@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

Configuration

Styles statiques

Styles dynamiques

Instanciation

}

}

}

}

Le CSS résultant 



.message-error, .message-warn, .message-valid, .message-info {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}

.message-error {
  color: #b94a48;
  border-color: #d59392;
  background-color: #efd5d4;
}

.message-warn {
  color: #c09853;
  border-color: #dbc59e;
  background-color: #f4ede1;
}

.message-valid {
  color: #468847;
  border-color: #7aba7b;
  background-color: #b6dab7;
}

.message-info {
  color: #3a87ad;
  border-color: #7ab5d3;
  background-color: #bfdcea;
}

Merci !


@HugoGiraudel