Je ne parle pas beaucoup de webdesign et de programmation sur mon blog. Pendant longtemps la raison a été que je ne me sentais pas forcément à l’aise avec ce que je faisais - pas assez au point par rapport aux nombreux standarts du web et à la qualité de ce qui se faisait ailleurs. Depuis le travail en agence m’a fait énormément progresser : moi qui n’avait à l’origine que quelques lointaines connaissances en PHP, ai désormais codé mon propre framework pour les sites qu’on me demande de faire. Avec gestion des templates, mise en cache des pages, code orienté SEO avec URL Rewriting et consorts, gestion du multilingue, admin intégrée etc. Le tout en OOP et conforme aux standars actuels du web (xHTML/HTML5/CSS3 et des touches de jQuery).

Le tout est plus formaté à mes propres besoins qu’à un usage public mais reste que depuis mon entrée dans le monde du travail, j’ai énormément progressé, principalement parce que je suis curieux et que j’adore apprendre sans cesse de nouvelles choses. Ma découverte du moment ? LessCSS.
Il n’est pas rare que dès que quelqu’un découvre ou redécouvre quelque chose de nouveau en webdesign, tout le monde s’emballe du jour au lendemain (voir le cas des CSS Media Queries). LessCss est à l’origine une extension Ruby qui propose d’enrichir le langage CSS via un panel de fonctions qui jusque là manquaient cruellement - le but étant de rendre le langage CSS plus flexible et lisible. Malgré son énorme potentiel (tout comme SASS, une extension CSS du même genre), la contrainte du langage Ruby a fait que le tout est jusqu’à peu resté dans l’ombre. Ce qui a changé il y a peu justement ? C’est que LessCSS est désormais proposé comme une script Javascript. Ça veut dire que concrètement tout ce qu’il y a à modifier dans son code c’est ça :

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script src=”less.js” type=”text/javascript”></script>

Il suffit de changer l’extension de sa feuille de style par .less et de joindre le fichier en ligne LessCSS, et c’est tout. On a une extension CSS portative, facile à intégrer, et universelle. Mais qu’apporte concrètement LESS pour ceux qui ne connaissent pas ? Pour peu que vous ayez un peu de connaissances en CSS, voici un exemple de code LESS que vous devriez comprendre et qui vous donnera un aperçu de ce qu’on peut faire :

// Fonctions
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
    @val: @x @y @blur rgba(0, 0, 0, @alpha);

    box-shadow: @val;
    -webkit-box-shadow: @val;
    -moz-box-shadow: @val;
}

// Mixins
.gras {
    font-weight: 900;
    text-decoration: underline;
}

// Blocs principaux
div {
    @base: #f938ab;

    .gras;
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);

    a {
        text-decoration: none;

        &:hover {
            color: red;
        }
        &:active {
            color: blue;
        }
    }
    p.introduction {
        background-color: @base - #333;
        .box-shadow(0, 0, 5px, 0.4);

        strong {
            .gras;
        }
    }
}

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
        &:hover {
            text-decoration: none;
        }
    }
}

Création de fonctions, de variables, de mixins (des propriétés que l’on pré-créer et ensuite réattribuer), mathématiques des couleurs, nesting des propriétés, et j’en passe. Le joli petit site officiel détaille mieux la chose que moi (et avec de la coloration de code surtout), toujours est-il qu’une fois qu’on y a goûté il est dur de s’en passer. Les possibilités sont vraiment nombreuses, comme par exemple cette grille dynamique en LESS.

La cerise sur le gâteau c’est - pour les soucieux de l’infime temps de calcul de LESS - les nombreux compileurs gratuits et multiplateformes qu’il existe, comme LESS.app qui vous demande un dossier de projet et qui ensuite compile des fichiers .css propres et valides en réel à mesure que vous travaillez sur vos .less. On a donc là une extension de langage qui peut-être à la fois vu comme une aide au code ou/et comme une extension matérialisant vos rêves les plus fous de design dynamique.
Je ne sais pas ce que vous allez en penser, peut-être des gens plus experimentés se prononceront-ils sur des défauts majeurs m’ayant échappés, mais pour l’instant LESS c’est mon petit coup de cœur et je ne suis pas seul.