xCSS – Framework CSS Orienté Objet

jmartin — Sat, 14 Nov 2009 00:34:00 +0000

J’ai découvert récemment un Framework CSS permettant de créer et gérer ses feuilles de styles plus rapidement, plus proprement et surtout apporter une stabilité dans vos fichiers CSS.

xCSS ou comment reprendre goût à l’intégration propre et structurée

Ce framework a été écrit en PHP5. Il parse un fichier source .xcss et génère à la volée le fichier .css.

Que nous propose ce framework ?

Des variables ? dans le css ??!

Et le rêve devient réalité…

vars {
  $path = ../img/tmpl1/png;
  $color1 = #FF00FF;
  $border = border-top: 1px solid $color1;
}
.selector {
  background-image: url($path/head_bg.png);
  background-color: $color1;
  $border;
}

Structure hierarchique

Certainement, une des plus belle choses de ce framework…


//Source
.selector {
  a { display: block; }
  strong { color: blue; }
}
// Cela génère le code suivant :
.selector a {
  display: block;
}
.selector strong { color: blue; }

L’héritage object CSS

//source
.basicClass {
  padding: 20px;
  background-color: #FF0000;
}
.specialClass extends .basicClass {}
// Cela génère le code suivant :
.specialClass, .basicClass {
  padding: 20px;
  background-color: #FF0000;
}

Et également d’autres features à découvrir

Nouveau système de commentaire, opérations mathématiques…

Rendez vous sur xCSS Framework pour découvrir plus en profondeur ce framework absolument indispensable!