Industrialisation graphique

Quelque soit la scalabilité d'une application, la qualité de l'intégration graphique ne se mesure le plus souvent que sur le rendu final applicatif. Les concepts de maintenabilité et ré-utilisabilité du code sont plus souvent dirigés vers les composants de présentation et métier de l'application.
Cet article a pour but de présenter deux méthodologies intéressantes pour avoir du code CSS plus compréhensible, maintenable et de qualité.

BEM : Block Element Modifier

L'esprit BEM est similaire à celui de la programmation orientée objet : une façon de décrire la réalité métier dans le code produit. Cette méthode décrit une arborescence d'une profondeur maximum de 3 niveaux composés de :

  • Block : partie indépendante de l'interface se suffisant à elle-même qui est réutilisable
  • Element : partie intégrante d'un bloc qui n'a de sens que dans le contexte bloc où elle est utilisée
  • Modifier : Défini une propriété ou un état d'un bloc et d'un élément

L'atout majeur de cette méthode est de fournir une "base de données" design pour ainsi mettre à disposition des éléments de graphisme réutilisables et assurer naturellement la cohérence visuelle d'une application.

Cependant, l'architecture CSS gagne rapidement en volume de part la rigidité des niveaux.

SMACSS : Scalable and Modular Architecture for CSS

smacss

La philosophie SMACSS s'articule plutôt autour de la flexibilité du code produit. L'intérêt ici est de pouvoir rapidement établir une architecture simple et organisée. Pour cela, les concepts de design sont les suivants :

  • Des règles de socle ou base qui établissent le design des éléments HTML basiques
  • Des règles de configuration ou layout  qui spécifient l'aspect des macro-composants de l'application
  • Des règles de composants ou module qui façonnent l'ensemble des parties réutilisables
  • Des règles d'état ou state où sont définies les différentes déclinaisons intrinsèques de chaque composant
  • Des règles de personnalisation ou theme où sont définies les déclinaisons générales de l'application

Ici, la simplicité de production est clairement le point fort de cette méthode au détriment de la modularité.

En action

example

Pour cet exemple, deux représentations suivant les méthodologies décrites précédemment:

BEM

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blog Netapsys | BEM & SMACCS</title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <base href="./">
  </head>
  <body>
    <div class="app">
      <div class="authentication authentication--required">
        <div class="authentication__login">
          <div class="input">
            <label for="login" class="input__label input__label--clear">Login</label>
            <input id="login" class="input__field">
          </div>
        </div>
        <div class="authentication__password">
          <div class="input">
            <label for="pass" class="input__label input__label--clear">Password</label>
            <input id="pass" class="input__field" type="password">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
BEM - HTML
.app {
	vertical-align: middle;
	text-align: center;
}

.authentication {
	height: 300px;
	width: 300px;
	display: inline-block;
}

.authentication--required {
	/* Some code here... */
}

.authentication__login {
	/* Some code here... */
}

.authentication__password {
	/* Some code here... */
}

.input {
	width: 100%;
	padding: 10px;
}

.input__label {
	/* Some code here... */
}

.input__label--clear {
	/* Some code here... */
}

.input__field {
	float: right;
}
BEM - CSS

SMACSS

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blog Netapsys | BEM & SMACCS</title>
    <link rel="stylesheet" type="text/css" href="app.css">
    <base href="./">
  </head>
  <body>
  	<div id="app">
  		<div class="authentication required">
  			<div id="login-layout">
					<label for="login" class="input-label clear">Login</label>
					<input id="login" class="input-field">
  			</div>
  			<div id="pass-layout">
					<label for="pass" class="input-label clear">Password</label>
					<input id="pass"  class="input-field" type="password">
  			</div>
  		</div>
  	</div>
  </body>
</html>
SMACSS - HTML
/* BASE */

input {
	/* Some code here... */
}

/* LAYOUT */

#app {
	vertical-align: middle;
	text-align: center;
}

#login-layout, #password-layout {
	width: 100%;
	padding: 20px;
}

/* MODULE */

.authentication {
	height: 300px;
	width: 300px;
	display: inline-block;
}

.input-label {
	/* Some code here... */
}

.input-field {
	float: right;
}

/* STATE */

.required {
	/* Some code here... */
}

.clear {
	/* Some code here... */
}
SMACSS - CSS

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.