Développement Web, Webdesign, SEO, Multimédia - Guillaume Voisin, Ingénieur Web » CSS Orienté Objet http://www.guillaumevoisin.fr Switch on creativity ! Tue, 07 Feb 2012 13:26:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Tip CSS: écrivez moins avec LESS ! http://www.guillaumevoisin.fr/css/tip-css-ecrivez-moins-avec-less http://www.guillaumevoisin.fr/css/tip-css-ecrivez-moins-avec-less#comments Mon, 15 Nov 2010 16:20:31 +0000 Gui http://www.guillaumevoisin.fr/?p=854

Je vous parlais il y a quelque temps d’avoir une approche orientée objet dans l’écriture des feuilles de styles, voici maintenant un réel framework Javascript « LESS » qui apporte à vos CSS un réel comportement objet.

Le but de LESS est de vous apporter un confort et un gain de temps dans l’écriture des CSS ainsi qu’une réelle logique de développement. L’approche Orientée Objet a déjà fait ses preuves en matière de web, tous les CMS sont basés sur des frameworks orientés objet, alors pourquoi pas le CSS ?

Principe

Il y a deux méthodes pour faire fonctionner ce framework. La première, que nous n’utiliserons pas ici, est de compiler le CSS au format .less directement depuis une console (basé sur Ruby), la deuxième est d’appeler un fichier JS qui va interpréter à la volée ce CSS.

Introduction

Pour démontrer l’éfficacité de LESS, nous allons créer une simple page web – deux colonnes avec un peu de CSS.

Voici notre page HTML :

brewfestgb
<head>
     <title>Ecrivez moins avec Less</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="css/style.less" rel="stylesheet/less" type="text/css" />
	 <script type="text/javascript"
	 src="http://lesscss.googlecode.com/files/less-1.0.35.min.js"></script>
</head>
<body>

<div id="global">

	<div id="header">
		<h1>Mon beau titre</h1>
	</div>

	<div id="container">

		<div id="page">
			<h2>Content</h2>
			<p>Lorem ipsum ...</p>

			<p>Lorem ipsum ...</p>

			<p>Lorem ipsum ...</p>
		</div>

		<div id="sidebar">

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

		</div>

	</div>

</div>

</body>

Et voici maintenant le CSS classique associé :

body{
	background:#222;
	font-family:Trebuchet MS;
}

p{
	color:#BBBBBB;
	font-size:0.7em;
	margin-bottom:0.5em
}

#header{
	background: #eee;
	-moz-border-radius:0.5em;
	padding:5px 10px
}

#header h1{
	color:#777;
	margin:0
}

#container{
	overflow:hidden;
	padding:10px
}

#page{
	width:70%;
	float:left;
}

#page h2{
	color:#888;
}

#page p{
	color:#fff;
}

#sidebar{
	float:right;
	width:30%
}

#sidebar .box{
	padding:10px;
	background:#777;
	-moz-border-radius:0.3em;
	margin-bottom:1em
}

#sidebar .box h3{
	color:#111;
	margin:0
}

#sidebar .box p{
	color:#eee
}

Ce qui donne une page comme celle-ci :

Transformation

Nous allons à présent transformer cette feuille de style en un fichier .less. La liste des fonctionnalités est disponible sur le site officiel.

Parmi celles-ci, j’ai particulièrement apprécié :

  • La gestion de variables
  • La nouvelle forme d’héritage objet (ou nested rules)
  • La gestion de fonctions (ou mixins)
  • Les opérations mathématiques

Voici donc notre nouveau fichier CSS : style.less

/* Définition de variables */
@primary_color: #777;
@secondary_color: #bbb;
@width: 960px;

/* Fonction pour les coins arrondis */
.rounded(@radius: 0.5em) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

body{
	/* Eclaircissement de la couleur de fond
	Grâce à la fonction de division */
	background:@primary_color/4;
	font-family:Trebuchet MS;
}

p{
	color:@secondary_color;
	font-size:0.7em;
	margin-bottom:0.5em
}

#header{
	background: @secondary_color*1.2;
	/* On applique la fonction de coins arrondis */
	.rounded(.5em);
	padding:5px 10px;

	/* Héritage objet */
	h1{
		color:@primary_color;
		margin:0
	}
	width: @width;
	margin:0 auto;
}

#container{
	overflow:hidden;
	padding:10px;
	margin:0 auto;
	width:@width
}

#page{
	width:70%;
	float:left;
	p{
		color:@secondary_color*2
	}
	h2{
		color:@primary_color*1.1
	}
}

#sidebar{
	float:right;
	width:30%;
	.box{
		padding:10px;
		background:@primary_color;
		.rounded(.3em);
		margin-bottom:1em;
		p{
			color:@secondary_color*1.2;
		}
		h3{
			color:#111;
			margin:0
		}
	}
}

Le grand atout de ce framework est la visibilité et l’accessibilité du code css qui rend la feuille de style beaucoup plus « propre » pour une future modification. Il y a même beaucoup moins de paramètres à remplacer (fini le rechercher/remplacer !).

L’héritage objet est très pratique et permet de gérer tout notre markup convenablement et sans s’y perdre.

Vous pouvez consulter la page web et les sources ici: tuts.guillaumevoisin.fr/css/less/

Le mot de la fin

J’ai été très séduit par cette librairie LESS, à tel point que je ne comprends pas pourquoi ces fonctionnalités ne sont pas inclues de base dans le CSS. Peut être avec CSS 4 ?

En attendant, cela reste une manière très intelligente, évolutive et maintenable de coder ses feuilles de style.

Que pensez-vous de cette approche et l’avez-vous déjà utilisée ?

]]> http://www.guillaumevoisin.fr/css/tip-css-ecrivez-moins-avec-less/feed 4 Le CSS Orienté Objet http://www.guillaumevoisin.fr/internet/le-css-oriente-objet http://www.guillaumevoisin.fr/internet/le-css-oriente-objet#comments Thu, 24 Sep 2009 10:09:58 +0000 Gui http://www.guillaumevoisin.fr/blog/?p=348

La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet.

En effet, elle permet d’avoir un code structuré, facilement réutilisable et dont la mise à jour est rapide et aisée.

Pourquoi ne pas l’adapter au CSS ?

A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers:

  • Système de Classes
  • Propriétés
  • Héritage

Comment l’appliquer au CSS

Les classes CSS

Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée.

Exemple ci-dessous d’une mise en page dite « spécifique »:

index.html

<div class="photo">
  <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p>
</div>

style.css

.photo{
    float:left;
    font-style:italic;
    font-weight:bold;
    width:50%
}

Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Pour des éléments quasi similaires (correspondance de deux voire trois propriétés), le code CSS devient redondant, ce qui implique un alourdissement du poids de la feuille de style et la nécessité de passer dans chacune des classes concernées lors de mises à jour.

Exemple ci-dessous d’une mise en page dite « orientée objet »

index.html

<div class="floatleft strong italic half">
  <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p>
</div>

style.css

.floatleft{
    float:left
}

.strong{
    font-weight:bold
}

.italic{
    font-style:italic
}

.half{
    width:50%
}

Ici au contraire, le code est:

  • « générique »,
  • réutilisable sur d’autres éléments,
  • compréhensible,
  • explicite,
  • n’alourdit pas la feuille de style (seulement un peu l’index.html vous me direz …)

La nomenclature des classes CSS est importante et doit être bien écrite pour être réutilisable. Ainsi, il ne faut pas écrire:

p.chapeau span.lettrine{
    font-size:2.5em
}

Mais

.chapeau .lettrine{
    font-size:2.5em
}

De cette façon, vous pouvez changer à souhait le code xhtml mais aussi utiliser ces classes sur d’autres éléments.

L’héritage

Quoique vous fassiez, vous l’utilisez. A partir du moment où vous définissez un sous ensemble, c’est de l’héritage. Par exemple :

.mondiv .header p{
    margin:0 10px
}

Après, il convient de l’utiliser à bon escient.

Trop de détails encombre la feuille de style et oblige à redéfinir les propriétés par la suite.

Ainsi:

#header #bandeau .top ul li a{
    text-decoration:underline
}

peut se réduire à :

#header .top li a{
    text-decoration:underline
}

De manière générale, il est plus intéressant d’appliquer des styles par héritage que par définition de classes. De cette manière, il est plus simple de changer la structure sans devoir repasser sur chacun des éléments afin d’y changer la classe.

Exemple:

<div>
  <ul>
    <li><p class="itemlist">Item 1</p></li>
    <li><p class="itemlist">Item 2</p></li>
  </ul>
</div>

Avec comme feuille de style:

.itemlist{
    padding:5px
}

peut être remplacé par:

<div class="list">
  <ul>
    <li><p>Item 1</p></li>
    <li><p>Item 2</p></li>
  </ul>
</div>

et

.list li p{
    padding:5px
}

Enfin, sachez qu’en utilisant trop d’héritage vous pourriez rencontrer des problèmes de redéfinition de classe.

En effet, mettons que vous avez cette classe dans votre page principale:

#content .header p{
    color:blue
}

Et que vous voulez qu’en règle générale tous les paragraphes du « header » soient de couleur rouge. Vous écririez logiquement :

.header p{
    color:red
}

Eh bien, malheureusement, cette dernière propriété ne sera pas prise en compte car la définition précédente à l’aide d’un identifiant est prioritaire par rapport à la définition par la classe.

Vous pourriez toutefois ruser en écrivant :

.header p{
    color:red !important /* Prend le pas sur toutes les définitions */
}

Mais ce n’est pas du joli joli !

Conclusion

Voici donc un aperçu du CSS Orienté Objet, une façon simple, logique et structurée d’améliorer votre intrégration xHTML, qui vous fera gagner du temps précieux, et rendra votre code nettement plus lisible et réutilisable !

Aller plus loin …

]]> http://www.guillaumevoisin.fr/internet/le-css-oriente-objet/feed 7