À un certain point, chaque programmeur utilisera CSS. Alors qu'il est souvent pris pour acquis, il est encore puissant et a un certain nombre de nuances qui peuvent aider, ou même faire du mal, vos conceptions. Les cinq principales pratiques CSS qui vous aideront à éviter les erreurs plutôt coûteuses et assurer que vous écrivez solide CSS se trouvent ici.

Assurez-vous qu'il est Readable

Ceci est un aspect crucial de CSS, même si beaucoup de gens négligent la raison pour laquelle il est si important. Lorsque vous atteignez une plus grande lisibilité avec votre CSS, il sera plus facile de maintenir à l'avenir, parce que vous serez en mesure de trouver des éléments beaucoup plus rapide. En outre, on ne sait jamais qui peut avoir à travailler avec le code à une date ultérieure.

Il existe deux types de base de développeurs CSS:

· Groupe 1: Le code est inclus dans une seule ligne.

· Groupe 2: Chaque style est mis sur une ligne distincte.

Vous pouvez simplement choisir les options qui vous semble la meilleure.

Gardez les choses Conformément

En plus de garder lisible, vous devez également veiller à ce que le CSS est conforme. En fait, vous devriez commencer à développer votre propre type de «sous-langue» par rapport à CSS qui vous permettra de vous attribuez rapidement des noms à certaines choses. Un exemple de ceci serait toujours en utilisant «droit de légende 'flotter les images qui contiennent une légende sur le côté droit.

Aussi, pensez si vous allez utiliser des tirets ou de soulignement dans vos identifiants et noms de classe, ainsi que les situations où ils vont être utilisés. Lorsque vous commencez à créer vos propres normes CSS, vous obtiendrez plus compétent.

Commencez par un cadre

Il y a un certain nombre de designers qui ne seraient jamais utiliser framework CSS avec chaque conception unique, mais dans la plupart des cas, ils seront utiles. La clé est d'être compatible avec chaque projet, ce qui vous aidera à obtenir des résultats plus solides. Il y a quelques programmeurs qui ont créé leur propre, cadre personnalisé au fil du temps, ce qui est aussi une bonne idée. Ces actions aideront à maintenir la cohérence au sein de vos projets.

Utilisez une réinitialisation

Dans la plupart des cas, les cadres de CSS auront un reset intégré; Toutefois, si vous ne comptez pas utiliser cela, alors vous devriez, à tout le moins, envisager d'utiliser la réinitialisation. La remise à zéro est essentiellement ce qui permettra d'éliminer les incohérences dans les différents navigateurs, tels que les titres, les marges, les tailles de police, des hauteurs, etc. Ajout d'une remise à zéro veillera à ce que la mise en page apparaît la même dans tous les différents navigateurs.

Un exemple d'une simple feuille de style de remise à zéro dans le domaine public est donnée ci-dessous:

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Combiner les différents éléments

Il y a certains éléments dans votre feuille de style qui se partageront les propriétés. Plutôt que de réécrire le code précédent, il suffit de les combiner. Un exemple de ceci serait avec vos éléments h1, h2, h3 et qui partagent tous la même couleur et la police. Cela peut écrire: h1, h2, h3 {font-family: Calibri, color: # 343}.

En utilisant les meilleures pratiques et des conseils pour CSS ne sera pas seulement d'assurer votre conception semble meilleure, mais aussi que vous serez en mesure de changer sur la route si vous le désirez.