Exemple pour first-child

La règle CSS

#target p:first-child {font-weight: bold;}

Le marquage HTML

<div id="target">
    <h2>Where the Buggalo Roam</h2>
    <p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. No! Don't jump! Dr. Zoidberg, that doesn't make sense.</p>
    <div>
        <p>Does anybody else feel jealous and aroused and worried?</p>
    </div>
    <h2>The Mutants Are Revolting</h2>
    <p>But, okay! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p>
    <h2>Space Pilot 3000</h2>
    <p>Now, now. Perfectly symmetrical violence never solved anything.</p>
</div>

Via @dhoko_

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Guide de bonnes pratiques HTML & CSS par Google
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Le petit journal du web — WordPress, développement web, etc.

Bien sûr, c’est très réducteur car ce métier est au carrefour de beaucoup d’autres : graphisme, design, ergonomie, accessibilité, développement, référencement (SEO), rédaction, etc. Chaque intégrateur et intégratrice web sera plus ou moins à l’aise avec tout ou partie de ces domaines, en fonction de son background et de ses expériences.

La question de Sophie est en fait plus précise : est-ce que l’intégrateur web doit obligatoirement connaitre Javascript ? Oui, l’intégrateur doit posséder des connaissances suffisantes pour modifier ou adapter du code Javascript ou plus prosaïquement pour rechercher le meilleur plugin jQuery en terme de fonctionnalités, de performances et d’accessibilité.

Qu’est-ce que l’intégration web ?

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou auditives : maquette plus ou moins détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composant la page. Il peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.

Source : Définir le métier « intégrateur web » ou « intégratrice web »

Qui fait de l’intégration web ?

Intégrateur web

Au sens strict, c’est celui ou celle qui découpe une maquette Photoshop (ou tout autre logiciel de traitement d’image) pour la transformer en page web à l’aide principalement de HTML et CSS. Il peut utiliser Javascript, le plus souvent sous la forme de plugin jQuery pour les carousels, les menus déroulants, etc

Webdesigner

C’est le graphiste spécialisé dans le web qui fait l’intégration de ses maquettes,

Développeur front-end

C’est le développeur PHP/Javascript qui fait la partie frontale du site en allant piocher les informations à afficher dans une base de données. Il utilise principalement PHP, Javascript, HTML et CSS.

Webmaster

Chargé d’alimenter le site web dont il a la charge, il peut être amené à coder les contenus ou à décliner des pages existantes.

Community manager

Ne rigolez pas. Oui, le community manager peut être amené à faire de l’intégration web.

La question subsidiaire est de savoir à partir de quel moment on devient un développeur qui fait aussi de l’intégration ?

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Définir le métier « intégrateur web » ou « intégratrice web »

Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagent le même vocabulaire. L’idée est de se concentrer sur ce que l’on a à dire plutôt que sur comment le dire. Via le blog des nouvelles technologies.

→ Lire Google HTML/CSS Style Guide

Articles sur le même sujet

• CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
• Quel est le coeur de métier de l’intégrateur web ?
• Recommandations pour développeurs web front-end
• Lutte des classes CSS !
• Tutoriels pour apprendre HTML & CSS

Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des cas, il suffira de modifier un des 140 exemples proposés.

Les paramètres modifiables sont :

• Positionnement des curseurs pour déterminer la longueur, l’opacité et le seuil des couleurs prises en compte,
• Ajustement des couleurs via des curseurs dynamique pour la teinte, la saturation et la luminosité,
• L’orientation du dégradé : horizontal, vertical, diagonal (droite-gauche), diagonale (gauche-droite) et radial,

Une fenêtre de prévisualisation permet de voir les changements en direct-live avec une case à cocher pour voir comment Internet Explorer se comporte avec les propriétés qu’il ne prend pas en compte.

Les CSS sont prêt à copier-coller avec en option l’équivalent pour SCSS (Sass) et le choix du mode colorimétrique (HEX, RGB, RGBa, HSL, HSLa).

Exemples SCSS (Sass)

// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(228,245,252); // Old browsers


@include filter-gradient(#e4f5fc, #2ab0ed, vertical); // IE6-8

// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%));

Exemple CSS

background: rgb(228,245,252); /* Old browsers */


/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JmZThmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzlmZDhlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYWIwZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */

background: linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-8 */

Pour IE9 — IE10

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Envie de plus de générateur de CSS ?

→ Rendez-vous sur Le petit journal permanent de CSS3 — 100+ ressources pour commencer.

PS : Trois message subliminaux se sont glissés dans ce billet :-)

Articles sur le même sujet

• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• HTML5 et CSS pour l'intégrateur web
• CSS3 Generator : éditeur de CSS3
• Nouvelle méthode de remplacement de texte par une image

Exemple 1

Exemple de code permettant d’appliquer un style commun aux éléments commençant par .btn- et de décliner des styles spécifiques pour .btn-left ou .btn-right. Larry Botha dans About HTML semantics and front-end architecture.

[class*="btn-"] { } // Styles génériques
.btn-small { }      // Diminuer font-size
.btn-medium { }     // Taille par défaut
.btn-large { }      // Augmenter font-size
.btn-primary { }    // Faire flotter le bouton à gauche
.btn-secondary { }  // Faire flotter le bouton à droite
.btn-left { }       // Ajouter une icône à gauche des boutons
.btn-right { }      // Ajouter une icône à droite des boutons

Exemple 2

On peut aussi s’inspirer du modèle d’architecture de l’exemple précédent en jouant sur les classes multiples :

.btn { }            // Styles génériques pour les boutons
.icon-right { }     // Ajouter une icône à droite de n'importe quel élément
.icon-left { }      // Ajouter une icône à gauche de n'importe quel élément
.btn.icon-right { } // Ajouter une icône à droite du bouton
.btn.icon-left { }  // Ajouter une icône à gauche du bouton

Exemple 3

Autre manière d’application d’un style générique à un élément .item déclinable selon le contexte. Rapide et pratique, cette solution présente tout de même l’inconvénient de ne pas être totalement scalable si vous décider de créer un nouveau contexte tel que #header .item {}

.item {}             // styles génétiques pour item
#cart .item { }     // styles spécifiques pour item dans le contexte du panier
#category .item { } // styles spécifiques pour item dans le contexte des catégories
#product .item { }  // styles spécifiques pour item dans le contexte des produits

.item { }
.item-cart {  }
.item-category { }
.item-product { }

.item { }
.cart { }
.category { }
.product { }
.item.cart {  }
.item.category { }
.item.product { }

Pour aller plus loin

• Organiser ses classes CSS — Comment ça, il n’existe pas de consensus sur l’organisation des feuilles de style CSS ?
• SMACSS – Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large. (cf. SMACSS — Architecture évolutive et modulaire pour CSS
• About HTML semantics and front-end architecture  – Covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.
• Writing efficient CSS selectors – The difference in speed between an ID and a class is almost totally irrelevant.

Articles sur le même sujet

• Quel est le coeur de métier de l’intégrateur web ?
• Guide de bonnes pratiques HTML & CSS par Google
• Tutoriels pour apprendre HTML & CSS
• Check your <body> avec le W3C
• SMACSS — Architecture évolutive et modulaire pour CSS

Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web :

1. Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.
2. Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.
3. Modèle de boite et positionnement — Comment gérer la taille des éléments (largeur, hauteur, marges internes et externes, bordures) et comment les positionner (positionnement flottant, absolu, fixé).
4. Typographie — Mettre en gras, en italique, en exergue, utiliser les polices de caractère. Bref, tout ce qu’il faut savoir sur la gestion du texte pour rendre vos compositions plus belles et plus lisibles.
5. Fonds et dégradés — Les fonds sont un élément important pour attirer l’attention des visiteurs. Apprenez comment mettre une image en background ou un dégradé avec CSS3.
6. Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.
7. Images, audio et vidéo — Apprenez à gérer l’affichage des médias sur le web avec les dernières technologies et les fallbacks qui vont bien. Le point également sur les éléments figure et figcaption.
8. Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.
9. Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.
10. Bonnes pratiques de développement et ressources — Les bonnes pratique de développement avec HTML & CSS : balisage sémantique et valide, bonne utilisation des attributs (notamment title et alt), séparation du fond et de la forme, les commentaires, les préfixes vendeurs, le regroupement et l’alignement des déclarations, etc.

Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. Un must-read (et oui, toutes ces bonnes choses sont écrites en anglais). Via @pomeh

CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web :

1. Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML
2. Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.
3. CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.
4. Boite à outils — Besoin d’un générateur de CSS ou de bouton, d’outils de développement ou d ‘une liste de discussion peuplée de gens compétents et sympas ? C’est là que ça se passe.

CSS : l’Art & la Science — Encore en français — et suggéré par LeonsaysHi –, ce tutoriel empreint de poésie et d’humour aborde avec intelligence les neuf points suivants :

1. Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux
2. Le pinceau CSS — Syntaxe, sélecteurs, héritage
3. Au plaisir des yeux — Color, font, text, word
4. L’abîme — Background, sprite
5. La dimension de nos espérances — Height, width, margin, padding, border
6. Au vent favorable — Float, clear
7. La prise, l’empire du désir — Position : relative, absolute, fixed, static
8. Pratiques de base — Le petit bassin
9. Bonnes pratiques — Le grand bassin

Cours de XHTML conforme et accessible – Ce cours proposé par Normand Lamoureux est conçu pour vous permettre d’apprendre le XHTML 1.0 (langage de balisage hypertexte extensible). Un concentré de bonnes pratiques pour créer des pages Web qui répondent aux normes de qualité du W3C. 

Plan de cours :

1. Les outils
2. Balisage et absence de balisage
3. Les en-têtes et les paragraphes
4. Créer et imbriquer des listes
5. Votre premier fichier valide
6. Parenthèse sur le rôle du langage CSS
7. Faire des citations
8. Le gras, l’italique et compagnie
9. Créer des liens hypertextes

Articles sur le même sujet

• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• HTML5 et CSS pour l'intégrateur web

EM Calculator

Si vous voulez utiliser une taille par défaut de 14px pour le texte, il vaut mieux appliquer une taille de 0.875em sur le body et sortir la calculette pour les autres tailles. Si vous avez la flemme d’utiliser votre calculatrice, EM Calculator est fait pour vous.

EM Calculator est un outil créé en JavaScript par Piotr Petrus pour convertir des px en em pour simplifier l’usage des em.

EM Calculator est un service simple et efficace pour déterminer l'équivalent em d'une taille exprimée en px.

Une des pierres d’achoppement des em's est qu’il faut remettre un coup de font-size: 1em; lorsque les balises sont imbriquées. Pour pallier cet inconvénient, EM Calculator permet de choisir sur quels niveaux de profondeur le calcul doit s’effectuer. Bien sûr, certains diront que l’unité rem est faite pour cela, mais l’utilisation de EM Calculator n’est tout de même pas si rédhibitoire.

Les plus

Comme vous pouvez le constater sur l’illustration ci-dessus, il est possible de choisir entre un élément frère (sibling) ou enfant (child). Parmi les options, nous pouvons modifier la taille par défaut de l’agent utilisateur (en général 16px). Cerise sur le gâteau, on peut sauvegarder plusieurs sessions de travail.

Le moins

Il ne semble pas possible d’exporter les CSS.

Articles sur le même sujet

• Nouvelle méthode de remplacement de texte par une image
• Une solution CSS accessible pour remplacer du texte HTML par une image
• CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
• Quel est le coeur de métier de l’intégrateur web ?
• Guide de bonnes pratiques HTML & CSS par Google

Comment fonctionne votre navigateur

— Présentation du fonctionnement d’un navigateur par Anthony Ricaud à l’occasion de Paris Web

C’est quoi le Reflow ?

— Visualisation du reflow effectué par le moteur de rendu Gecko (Mozilla) sur une page web.

Articles sur le même sujet

• Générateur de coins arrondis avec border-radius
• 1000 ressources pour le développement web et WordPress
• Nouvelle méthode de remplacement de texte par une image
• Nouvelle méthode de remplacement d’image en CSS
• 390 ressources Javascript & jQuery

Principaux validateurs du W3C

• Unicorn– C’est le Validateur unifié du W3C pour :
  • Vérifier la conformité générale en effectuant tous les tests possibles.
  • Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
  • Vérifier la compatibilité avec les portables.
  • Vérifier la syntaxe des flux Atom ou RSS.
  • Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
• Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
• Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
• CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
• mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

• Semantic Extractor — Affiche votre page web d’un point de vue  sémantique : outline, description, langages utilisés, etc.,
• RDF Validator — Vérification et affichage des documents RDF,
• Feed Validator — Vérification des flux de nouvelles aux formats ATOM et RSS,
• P3P Validator — Vérifie si un site est compatible P3P,
• XML Schema Validator — Outil en cours d’approbation par le W3C,
• Logiciels open source du W3C.

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

• Moteur de recherche
• Mobile Web Best Practices
• Accessibility: WCAG2 at a Glance
• Internationalization Quicktips
• English Typography

Articles sur le même sujet

• Tutoriels pour apprendre HTML & CSS
• 9 ressources pour web designer
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations
• Améliorations cosmétiques et ergonomiques sur ce blog

Diviser pour mieux régner

1. Base — Il s’agit des réglages par défaut valables pour l’ensemble de votre projet. Ils devraient se composer exclusivement de sélecteurs simples, mais peuvent comporter des sélecteurs d’attributs, des pseudo-éléments , des sélecteurs frères ou enfants. Cf. 5 Reset CSS à la loupe.
2. Maquette — Ces règles divisent la page en plusieurs sections qui peuvent comporter un ou plusieurs modules. Cf. Choisir un framework HTML & CSS.
3. Module — Ce sont les parties modulaires, réutilisables de votre page (légende, mise en exergue, fiche produit).
4. Etat — Ces règles spécifient : le comportement de la maquette et des modules  selon le contexte (activé / pas activé, affiché / masqué) ; l’affichage de la page selon la résolution de l’écran ; ou l’apparence de tel module selon qu’il se trouve en page d’accueil ou en page «intérieure».

Convention de nommage

Une fois que l’on a divisé nos règles CSS, il devient facile de mettre en place une nomenclature adaptée pour savoir du premier coup d’œil à quel élément l’on a affaire : quel est son rôle dans la page, sa portée, etc.

Pour cela, on peut utiliser des préfixes, comme l- ou layout- pour les éléments de la maquette (layout), mais grid- fonctionne très bien aussi ! Pour préfixer les règles d’état, on peut utiliser is- pour is-hidden ou is-collapsed. Les modules composent généralement la plus grande partie d’un projet. C’est pourquoi mettre un préfixe module- systématiquement est plus verbeux qu’autre chose. Préférez plutôt le nom du module lui-même, et basta !

Exemples de classes

/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }

Il devient facile de décliner votre maquette selon le contexte. Par exemple pour permuter l’article et la barre latérale :

#article { float: left; }
#sidebar { float: right; }
.l-flipped #article { float: right; }
.l-flipped #sidebar { float: left; }

#article {
    width: 80%;
    float: left;
}
#sidebar {
    width: 20%;
    float: right;
}
.l-fixed #article { width: 600px; }
.l-fixed #sidebar { width: 200px; }

Identifiant vs. classe ?

Ces exemples utilisent des sélecteurs d’ID pour la maquette mais rien ne vous empêche d’utiliser des classes (voire même un framework CSS) : la différence de performance entre les deux est quasi-inexistante.

Par ailleurs, à cause de leur poids plus important, les identifiants peuvent poser des problèmes de spécificité et nécessiter l’ajout de sélecteurs inutiles pour surclasser telle ou telle déclaration.

Pour aller plus loin

Après ce rapide aperçu, je vous invite à vous procurer SMACSS aussi vite que possible pour découvrir toute une floppée de trucs et astuces qui vous aideront à organiser vos maquettes, vos modules et les états qui vont avec.

Notez que l’auteur précise que ses conseils ne sont pas à suivre aveuglément. Toutefois, il insiste tout de même sur le fait qu’il est important d’avoir des conventions documentées et de s’y tenir.

SMACSS est un livre électronique dont on peut obtenir la dernière version à partir de 9$ pour la version Kindle (ou 15$ pour la version PDF, ePub et mobi).

→ Notez que la version originale est disponible gratuitement en ligne.

Articles sur le même sujet

• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8
• Lutte des classes CSS !
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid