Css 3.0

Bonne pratiques des nommages en css

Dans le projet NextDom nous sommes confronté à la refonte du style. Beaucoup de style est directement présent dans le HTML. Il fallait repartit sur de bonnes bases si nous voulions assurer la pérennité de notre développement.
En premier lieux, nous avons décidé d’utiliser SASS. On y gagne :

  • les variables,
  • la vérification de syntaxe,
  • une meilleure lisibilité
  • la possibilité d’utiliser la syntaxe CSS et de la transformer petit à petit en SCSS
  • la possibilité de découper facilement d’énormes feuilles de styles en de plus petits fichiers plus digeste

la sortie du style du HTML est un gros morceau que mes collègues ont commencés et ce n’est pas simple. Très vite est apparu le besoin de créer de nouvelles classes et surtout de les nommer correctement.

C’est un point très compliqué en informatique, savoir nommer les choses et ce n’est pas que moi qui le dit :

There are only two hard things in Computer Science: cache invalidation and naming things.

– Phil Karlton

Lorsque je fait une intégration j’essaie de concilier deux choses vraiment pas évidentes. Je veux rendre le plus abstrait possible le nom de mes classes et en même temps il faut ce même nom soit le plus compréhensible possible. Sachant que je ne suis pas un spécialiste du frontend et que j’en fait que quand je suis vraiment obligé.

Des exemples de ce qu’il ne faut pas faire

Mon expérience m’a fait rencontrer des choses étranges  :

.h1, .h2, .h3 ...

Vouloir créer des classes pour faire passer une balise pour ce qu’elle n’est pas n’est pas une bonne pratique. C’est comme si on mettait une étiquette girafe à un éléphant, un éléphant reste un éléphant. Pour l’accessibilité des personnes défaillantes visuelles ou autre, elle perdent la sémantique de l’information qui leur est présentée.

.span_colorblue, .pre_code-php ...

Dans le cas vu ci-dessus on mélange la sémantique de la balise et le style qu’on veux lui appliquer. Par ailleurs, span_colorblue ne donne pas d’information sur l’utilité réelle de cette classe si ce n’est que le texte est en bleu. Pourquoi n’aurait on pas besoin d’une couleur bleu ailleurs qu’avec un span.

.toto > div > p > img {
    width: 500px;
}

Il faut aussi faire attention de ne pas trop lier l’imbrication des balises avec la feuille de style. Un seul sous niveau est un maximum. Au-delà, l’imbrication est trop forte et le moindre changement est trop long à répercuter.  Si vous voulez atteindre les images, mettez une classe à « img » et le problème est réglé.

CammelCase ou snake-case

A la lecture de la norme su le document de référence du W3C on se rende compte que les attributs id et classes sont « case-insensitive », les seules séparateurs autorisés son le – et le _ .

https://www.w3.org/TR/CSS21/syndata.html#characters

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes « id » and « class », of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

La symbolique

la première question à se poser est : « Qu’est-ce que je veux représenter et dans quel contexte« . Si on répond à ces deux questions, on a rapidement des noms qui nous viennes à l’esprit.

Regardons le code HTML suivant :

<div class="background-blue">
    <h1 class="strong">Un super titre</h1>
    <h2>Un super sous titre</h2>
</div>
<div class="normal">    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ratione vero ad repellat ea. Sint, est, eligendi expedita ducimus magnam quae voluptate! 
        Amet possimus error sapiente consectetur dolore qui illo?    
    </p>
</div>

Les classes « background-blue », « strong » et « normal » sont instanciées. Le problème, vous l’aurez compris est qu’elles n’indiquent pas pour quel usage réelle elles sont destinées. La classe « normal » n’a pas de signification. Qu’est-ce qui est normal ?

Selon moi, voici ce qu’il aurai fallu faire.

<div class="head">
    <h1 class="head-title">Un super titre</h1>
    <h2>Un super sous titre</h2>
</div>
<div class="content">    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ratione vero ad repellat ea. Sint, est, eligendi expedita ducimus magnam quae voluptate! 
        Amet possimus error sapiente consectetur dolore qui illo?    
    </p>
</div>

J’ai choisi l’anglais pour nommer mes classes, c’est un choix qui n’engage que moi. Regardons attentivement la première div, la classe « head » indique que nous sommes dans le contexte d’une entête qui contiens des titre et sous titre. On a le schéma suivant A contient A-B etc…

Dans la div suivante « normal » a été remplacé par « content » car c’est l’objet de cette div de contenir un texte.
J’attend vos retours pour agrémenter cet article…

Css 3.0

Les hacks CSS (memento)

Voici un petit article qui peu servir à beaucoup de monde, même si l’abandon d’IE à apporté une bouffée d’oxygène à la création web, il reste des moments où des différences d’affichage se font sentir entre Firefox IE et WebKit (Safari, Chrome et bientôt Opéra).

Voici des éléments à ajouter à votre feuille de style CSS pour appliquer des rendu spécifiques à certain moteurs.

On commence par WebKit avec par exemple une marge de 10 px :

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #monId {
        margin : 10px;
    }
}

Pour Firefox :

@-moz-document url-prefix()
{
     #monId {
        margin : 10px;
    }
}

Le plus Courant, un Hack pour IE :

<!--[if lt IE 8]>
<br />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%23monId%20%7B%0A%20%20%20%20%20margin%20%3A%2010px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
< ![endif]-->

Ce mardi je vous emmène au casino !

C’est avec ce code source que vous allez pouvoir jouer au « Bandit manchot ». Il est séparé en deux parties, le Html et le JavaScript.

Pour voir le résultat, cliquez ici.

Le code Html :

<body>
<br />
<div id="globale">
<br />
<div id="contenu">
<br />
<div id="levier2">

                <input type="image" value=" " onclick="lancer_jeu();" id="levier"/>
            </div>
<p>
<br />
<div id="resultat">
<br />
<p id="affichage_gains">
                ---
                </p>
<p>
            </div>
<p>
<br />
<div id="pot">
<br />
<p class="vert">votre pot <br />est de :
                </p>
<p>

<br />
<p id="affichage_pot">100
                </p>
<p>
<br />
<p class="vert">mise :
                </p>
<p>
<br />
<p id="affichage_mise">0
                </p>
<p>
            </div>
<p>
<br />
<div id="jackpot">
                <img name="s1" src="media/theme/slot-vide.png" alt="slot-vide"/>
                <img name="s2" src="media/theme/slot-vide.png" alt="slot-vide"/>
                <img name="s3" src="media/theme/slot-vide.png" alt="slot-vide"/>
            </div>
<p>

<br />
<div id="boutons">
                <input onclick="miser();" type="image" src="media/theme/mise-plus.png" id="miser1"/>
                <input onclick="tout_miser();" type="image" src="media/theme/mise-tout.png" id="miserall"/>
            </div>
<p>
        </div>
<p>
    </div>
<p>
</body>

Le code JavaScript :

var mise = 0;
var pot = 100;
var gains = 0;
// nombre de slots
var nombre_slots = 3;
// declaration d'un tableau avec "slots" comme valeur
var slots = new Array(nombre_slots);
//dclaration de la valeur des slots
var valeur_des_slots = 0;

function lancer_jeu()
{
    if (mise == 0) return;

    // rinitialisation de la valeur des slots
    valeur_des_slots = 0;

    // creation et remplissage du tableau
    for (var index = 0; index < nombre_slots; index++) { slots[index] = tirer_aleatoirement_image(); } s1.src=slots[0]; s2.src=slots[1]; s3.src=slots[2]; calculer_gains(); } //Cette fontion sert pour augmenter la valeur du pot function garder_gains() { if (valeur_des_slots > 0)
    {
        //alert('Vous avez Gagné !!!'); // Affiche une box avec le message "Vous avez Gagné"
        pot = pot + gains;
    }
}

//fonction pour tirer alatoirement une image

function tirer_aleatoirement_image()
{
    var nombre_images = 4;
    // nom de toutes les images d'un slot
    var images = new Array("./media/slot/slot-euro.png","./media/slot/slot-cerise.png","./media/slot/slot-etoile.png","./media/slot/slot-couronne.png");
    // tirage de l'alea
    var alea = Math.floor(Math.random()*nombre_images);
    // recuperation du nom de l'image dans le tableau
    var slot = images[alea];
    // mise  jour de la valeur des slots
    valeur_des_slots = (Math.pow(10,alea)) + (valeur_des_slots);
    return slot;
}

function calculer_gains()
{
    //je fais un switch case pour savoir quels sont mes gains
    switch(valeur_des_slots)
    {
        case nombre_slots:
            gains = mise*20;
            alert('jackpot');
            garder_gains();
            break;

        case nombre_slots * 1000:
            gains =  mise*15;
            garder_gains();
            break;

        case nombre_slots * 100:
            gains = mise*10;
            garder_gains();
            break;

        case nombre_slots * 10:
            gains = mise*5;
            garder_gains();
            break;

        case 12:
        case 102:
        case 1002:
            gains = mise*2;
            garder_gains();
            break;

        default:
            gains = 0;
            break;
    }
// rechargement automatique de la mis tant que le pot est plein (plus ergonomique)
    mise = 0;
    if (pot > 0)
    {
        pot -= 1;
        mise = 1;
    }
    document.getElementById("affichage_pot").innerHTML = pot;
    document.getElementById("affichage_gains").innerHTML = gains;
    document.getElementById("affichage_mise").innerHTML = mise;
}

function miser()
{
    if (pot > 1)
    {
        pot -= 1;
        mise += 1;
        document.getElementById("affichage_pot").innerHTML = pot;
        document.getElementById("affichage_gains").innerHTML = gains;
        document.getElementById("affichage_mise").innerHTML = mise;
    }
}
function tout_miser()
{
    if (pot > 1)
    {
        mise += pot;
        pot = 0;
        document.getElementById("affichage_pot").innerHTML = pot;
        document.getElementById("affichage_gains").innerHTML = gains;
        document.getElementById("affichage_mise").innerHTML = mise;
    }
}

Le code css :

*
{
    margin: 0;
    padding: 0;
}
p
{
    font-family: Arial;
}
/*------------------divs---------------------*/
#globale
{
    width: auto;
    height: auto;
}
#contenu
{
    position: relative;
    top:25px;
    margin-left:auto;
    margin-right: auto;
    background: url(../theme/fond.png) no-repeat;
    width: 642px;
    height: 426px;
}
#levier
{
        float: right;
        width: 96px;
        background: url(../theme/levier-depart.png) no-repeat;
        width:100px;
        height:300px;
}
#levier2
{
        float: right;
        width: 96px;
}
#levier:hover
{
    background: url(../theme/levier-milieu.png) no-repeat;
}
#levier:active
{
    background: url(../theme/levier-jouer.png) no-repeat;
}
#jackpot
{
    float:right;
    top:30px;
    position:relative;
    right:30px;
}

#resultat
{
    position: relative;
    background:url(../theme/resultat.png) no-repeat;
    width: 532px;
    height: 61px;
    margin-left:6px;
    top:20px;
}
#resultat p

{
    font-size: 30px;
    top:15px;
}

#result-tirage

    {
        position: relative;
        float: right;
        width:auto;
        top:35px;
        right:40px;
    }
#pot
{
    position: relative;
    background:url(../theme/mise.png) no-repeat;
    width: 149px;
    height: 199px;
    float:left;
    top:40px;
    margin-left: 7px;
}

#pot p
{
    font-size: 15px;
    top:35px;
    margin-top: 10px;
}
#boutons
{
    position: relative;
    top:50px;
    float: left;
    left:90px;
    width: auto;
    height: auto;
}
#affichage_gains
{
    position: relative;
    color:green;
    text-align: center;
}
 #affichage_pot
{
        position: relative;
        color:green;
        text-align: center;
}

#affichage_mise
{
        position: relative;
        color:green;
        text-align: center;
}
/*------------------------------classes--------------------*/
.vert
{
        position: relative;
        color:green;
        text-align: center;
}

Grand maître L