½ {$title}
{$author} of {$slidecount}

CSS Trop Facile ! Sûr ?

CSS {
   trop facile : Sûr ? ;
}

Mon expérience avec CSS

  • 2001 Découverte CSS 1.0 lorsque je m’occupais du site de l’ESAD.
  • 2000 – 2005 : Époque Dreamweaver WYSIWYG
  • 2005 – 2007 : Débuts en CSS 2, coder 3 – 4 sites en tant que graphiste indépendant
  • 2007 – 2008 : Enseigner les CSS niveau débutant à Africatic
  • Depuis Jan 2009 : Intégrateur Web à Senticad

CSS un code facile.

Css n’est pas un langage de programmation

Syntaxe simple

selecteur { attribut : valeur }
selecteur { attribut : valeur1 valeur2 valeur3 … }

Avantages

  • On peut oublié accolade, point-virgule, il ne fera pas planté votre navigateur.
  • Des styles seront toujours appliqués à vos balises html

Minimum de bonnes pratiques

Minimum de nommage standard (nomenclature)

  • header, content, footer, sidebar

structure simple page html

Minimum de structure page CSS

/*Header*/
#header {}
#header h1 {}
#header a {}

/*Content*/
#content {}
#content h1 {}
#content a {}

/*Footer*/
#footer {}
#footer h1 {}
#footer a {}

Souvent insufisant

Trop de répétition

Intervention en surcouche

Alors

Piste pour améliorer

  • Bien comprendre la cascade
  • Analyser les systèmes généralistes existant et ce qu’ils ont apportés
    • Framework CSS
      • Blueprint
      • 960gs

Ce que je cherche

  • Pouvoir cibler de manière sélective
    • tous les éléments qui le même rôle
      • Tous les éléments de navigation quel que soit leur emplacement
      • Tous les éléments d’un même groupe
      • Un élément particulier
  • Leur appliquer un style rapidement, sans être retardé par la cascade
  • Savoir exactement sur quel élément je travail
  • Pouvoir me relire et m’y retrouvé immédiatement

Cascade CSS

Le problème vient en partie de la méconnaissance du fonctionnement de la cascade.

  • Les feuilles de styles externes prennent le dessus sur celles du navigateur
  • Les styles embarqués (dans le code html) prennent le dessus sur les feuilles externes et les balises
  • à niveau de selecteur égal, la dernière déclaration l’emporte (la plus basse)

Valeur des selecteurs

* 0 0 0 0
p 0 0 0 1
:pseudo 0 0 0 1
[attr=valeur] 0 0 1 0
.class 0 0 1 0
#id 0 1 0 0
style=”“ 1 0 0 0

En savoir plus sur la cascade

1 http://openweb.eu.org/articles/cascade_css

2 http://josh.github.com/css-explain/

Exemple cascade

Ce que m'on apporter les framwork CSS

  • Découpage de ma feuille de style en plusieurs feuilles (cf. Méthode Daisy : les CSS feuille à feuille (Romy Duhem Verdière)1)
    • reset.css
    • typography.css
    • forms.css
    • default.css
    • screen.css
    • print.css
  • Notion de grille en css
  • Class misc ou objet
    • .clearfix
    • .ir (image-remplacement)
  • l’utilisation de class multiples

1 http://www.dailymotion.com/video/xh699t_methode-daisy-les-css-feuille-a-feuille_tech

Écrire une Nomenclature de Class

Définition

Choisir un nom de class CSS pour tous les éléments récurrents des projets web.

  • Inspiration
    • nouvelle sémantique HTML5
    • Aria

Objectif

  • Accélérer l’écriture du code HTML
  • Avoir une sémantique propre
  • Uniformiser les différents projet de l’entreprise
    • Uniformiser les feuilles de styles de l’entreprise
    • Avoir une structure de style standard, quel que soit l’intégrateur qui intervient sur le projet.

oriented object CSS & SRP

  • Adapter le principe de la responsabilité unique (SRP) aux CSS12

1 csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css

2 blog.emmanueldeloget.com/index.php?post/2006/09/07/16-le-principe-de-responsabilite-unique

Performance CSS

Performance de sélecteurs

https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
Shoot to kill; CSS selector intent

  • #id
  • .class (très proche de l’#id)
  • balise
  • …
  • #id balise
  • [attr:valeur]
  • balise + balise
  • * (l’un des plus lent)
  • CSS profiler qui permettront de vérifier la performance de ces feuille de style dans un navigateur (yslow pour css) [1]

1 http://bricss.net/post/13884376788/the-css-profilers-are-coming

Sources d'inspiration / d'utilisation

  • Framework
    • Blueprint : découpage de mes styles, reset.css, feuille typo.css, form.css
    • 960 : system de grille (je n’utilise pas la grille 960)
    • oocss : principe de la réutilisation maximal du code écrit, comme si chaque déclaration CSS était une fonction à appliquer sur une balise html
    • formee : mise en forme des formulaires.
  • Base
    • Boilerplate : class misc
      • .clearfix
      • .ir

Résultat