Tutoriel Coder plus proprement et plus rapidement

[LawYor]

Si vous êtes web designer, vous devez toujours faire en sorte de coder rapidement (le temps c’est de l’argent xD), et proprement pour la lisibilité du code. Aujourd’hui, vous apprendrez quelques ficelles en CSS pour écrire moins !

Les couleurs:

Les couleurs en informatique, sont formés de 6 chiffres hexadécimaux (de 0 à F) et commencent par une dièse (#).

Pour les nuances de gris, c’est parfois le même chiffre qui est répété six fois.

Formule longue

body { color: #333333; }

Pour ces nuances, je vous montre une petite astuce, c’est de n’écrire que les 3 chiffres.

Formule courte

body { color: #333; }

Propriété « background »

Il y a cinq propriétés pour modifier le fond d’un élément en CSS.

Formule longue

#logo {
      background-color: #CCCCCC;
      background-image: url(logo.png);
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-attachment: scroll;
}

Formule courte

Au lieu de passer tout son temps à écrire ces 5 propriétés, pourquoi ne pas tout taper en une seule ligne !

#logo { background: #CCC url(logo.png) no-repeat 0px 0px fixed; }

Propriété « border »

Ces propriétés sont faites pour ajouter une bordure à un élément.

Formule longue

#example {
      border-width: 2px;
      border-style: solid;
      border-color: #333;
}

Formule courte

#example { border: 2px solid #333; }

Propriétés « margin » & « padding »

La propriété margin sert à ajouter une marge extérieur à un élément.

Pendant que la propriété padding, elle ajoute une marge intérieur à un élément

Formule longue

#example {
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-left: 5px;
 
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 5px;
}

Formule courte

#example {
      margin: 5px 10px 10px 5px;
      padding: 5px 10px 10px 5px;

[comaX]

Juste histoire de tortiller du cul, mais sinon, bon article, merci

Pendant que la propriété padding, elle ajoute une marge intérieur à un élément

Il s'agit plutot de gérer la distance à la bordure de l'élément. Enfin, au final, on est d'accord, ca fait une marge intérieure...

[L3FT0V3R]

Merci pour l'astuce ....

[Ghostweber]

Si j'avais su ça plus tôt ! Merci pour ce gain de temps.

[LawYor]

il ne faut pas écrire merci on a ajouté un bouton pour ça

[xSheldown]

C'est sympas, mais bon pour 3 lignes de plus je préfère restez au bonne vielle technique.

[TorTukiTu]

Bon, je vais encore faire mon chiant et mon code nazi en rajoutant quelques petites remarques.

Un feuille de style est plus propre dans le sens où elle est plus lisible. Certains exemples sont justifiés, typiquement le

margin: 5px 10px 10px 5px;

Qui simplifie la lecture.

En revanche, mettre des attributs très différents sur une même ligne, complexifie la lecture et rend le code global moins propre.

styleblock {background: #CCCCCC; font-color: #445444; border: ...}

est moins lisible que

styleblock {
          background: #CCCCCC; 
          font-color: #445444;
          border: ...
}

Qui plus est, il est toujours mieux de sauter une ligne après une acollade.
Ca permet de mieux visualiser le contenu des accolades. Dans 99.9 % des cas, le

styleblock {...}

est à proscrire au profis du

styleblock {
            ...
}

Bien entendu, il est préférable d'écrire ses couleurs dès le départ sur un maximum d'octets. En effet, si vous avez commencé à écrire vos couleurs avec 3 lettres et que vous avez besoin d'une variante plus subtile, vous serez obligé de faire cohabiter les deux notations sur une même feuille de style...
Bien sûr, ca n'est pas dérangeant plus que ca, c'est juste un peu moins propre...

Dans tous les cas, il est préférable de faire un choix dans la présentation du code ET DE S'Y TENIR !

Une fois le style écris proprement, on peut le passer dans des moulinettes qui vont condenser le style pour rendre le fichier à envoyer au client pus léger.

Tortue 974.

PS: Crotte, je viens de voir que le mec du dessus a fait un déterrage bidon (avec 5 fautes à la ligne).

[Practeo]

Hello,

Je viens aussi y mettre mon petit grain de sel.

Pour vraiment développer plus rapidement en CSS il existe des langages permettant de compilé le CSS.
Les plus connus sont LESS et SASS.

Qu'est-ce que du CSS compilé ?
A vrai dire, vous allez développer vos CSS dans un langage qui ressemble énormément à du CSS, mais qui possède des nouveautés qui vont vous faciliter la vie. Suivant la configuration de votre compilateur, vous pouvez choisir de compilé votre CSS à chaque enregistrement de votre fichier, et vous pouvez choisir en sortie un CSS entièrement compressé et optimisé.

Les avantages sont par exemple de pouvoir définir des variables ou des fonctions. Si vous voulez avec une bordure un peu plus foncée que la couleur de votre div il vous suffit de développer une fonction qui va recevoir une couleur et qui va la rendre plus foncée de 30%.

Un compilateur SASS, LESS et COMPASS est sorti dernièrement. Son avantage est qu'il est entièrement gratuit et est multi-plateforme. Il se nomme Prepros.


Cordialement.