Optimiser votre Css

5 conseils pour organiser votre CSS

Travaillant depuis quelques années les feuilles de style Css sur des sites pour des particuliers et des professionnels m’a fait commencer à réfléchir à la meilleure façon d’organiser et de standardiser la manière dont j’écris mes CSS. Voici donc mes meilleurs conseils qu’on puisse avoir sur l’organisation des feuilles de style Css.

1) La première astuce est peut-être la plus utile, car elle peut s’appliquer à la fois aux formats CSS de l’organisation que je vais décrire plus tard. J’ai vu pour la première fois sur ce Mike Rundle où il tirets descendant et les règles connexes.

Par exemple:
#main_side {
width: 392px;
padding: 0;
float: right; }

#main_side #featured_articles {
background: #fff; }

#main_side #frontpageads {
background: #fff;
margin: 8px 0; }

Cette structure permet de mieux définir les zones de la page et comment elles sont liées les unes aux autres.

Aussi, la technique peut être utilisée lorsque le style des domaines précis, même si la base ne nécessite pas de règles. Cela peut être vu dans les manchettes:

h2 { }

#snapshot_box h2 {
padding: 0 0 6px 0;
font: bold 14px/14px “Verdana”, sans-serif; }

#main_side h2 {
color: #444;
font: bold 14px/14px “Verdana”, sans-serif; }

.sidetagselection h2 {
color: #fff;
font: bold 14px/14px “Verdana”, sans-serif; }

2) Le deuxième astuce est d’utiliser un raccourci de conserver toutes les propriétés des parties d’un type de style sur une seule ligne.

Par exemple:

Margin: 5px 0 4px 10px;

Est beaucoup plus efficace que:

Margin-top: 5px;
Margin-right: 0;
Margin-bottom: 4px;
Margin-left: 10px;

La combinaison de propriétés sur une seule ligne à l’aide d’un raccourci propriétés signifie que votre CSS sera plus facile à comprendre et à modifier.

# Test (
Margin-top: 2px;
Margin-right: 3px;
Margin-bottom: 5px;
Margin-left: 9px;
Font-weight: bold;
Font-size: 12px;
Line-height: 14px;
Font-family: Arial, Verdana, sans-serif;
Border-width: 1px;
Border-style: solid;
Border-color: # 000000;
Background-color: # FFF;
Background-image: url (bg.gif);
Background-repeat: no-repeat;
Background-position: 0 15px;
)

C’est presque impossible à modifier, mais à l’aide de quelques propriétés de la sténographie, le morceau ci-dessus peut être réduite à un bien plus gérable quatre lignes.

# Test (
Margin: 2px 3px 5px 9px;
Font: bold 12px/14px Arial, Verdana, sans-serif;
Border: 1px solid # 000;
Background: # fff url (bg.gif) 0 15px no-repeat;
)

3) Le troisième astuce est de clairement diviser votre feuille de style dans des sections spécifiques. Aussi, à l’aide d’un drapeau, vous pouvez accéder à la zone que vous cherchez plus rapidement. Avant de vous divisez vos styles, il est important de définir les grandes lignes sont à l’aise avec vous comme nous le verrons comme un séparateur de format que vous pouvez le constater facilement.

Voici un exemple de format j’essaie de s’en tenir à ceci:

* Global Styles – (corps, paragraphes, listes, etc)
* Header
* Structure de la page
* Les rubriques
* Texte Styles
* Menu
* Formulaires
* Commentaires
* Extras

Et un échantillon séparateur qui est le plus facilement perceptible pour moi, c’est:

/ * ———————————–*/
/ * ———- GLOBAL ———–*/
/ * ———————————–*/

4) Le quatrième astuce est difficile à s’habituer, mais peuvent être très précieux, une fois perfectionnés. Il est important de définir les règles de base pour chaque domaine, une seule fois, afin que la même valeur par défaut est de ne pas être réécrite dans chaque règle. Si vous savez que tous les h2 de la volonté de ne pas disposer d’une marge ou padding, définir que sur le haut niveau et de laisser ses effets en cascade comme elle est supposée. Cela aide beaucoup si le modèle exige de fréquents changements de couleur ou d’autres modifications structurelles.

5) Le cinquième astuce est plus d’une comparaison entre des grandes options de l’organisation de vos CSS, chacun avec ses propres mérites et les défauts.

D’une part, vous pouvez jeter vos CSS dans un compresseur pour obtenir un très poli et propre vision de l’ensemble de votre structure CSS – chaque article sur une seule ligne. L’avantage de cette méthode est que vous pouvez obtenir une vue simple de l’ensemble de votre feuille de style sans trop de défilement. L’inconvénient est qu’il est difficile de les modifier, car de nombreuses règles, il faudra vous faire défiler horizontalement.

Utilisation de la méthode plus courante de tabulation pour l’organisation renverse tout simplement les avantages et les inconvénients.

La méthode la plus simple consiste à combiner toutes les astuces pour passer au-dessus de la base des styles pour tous les éléments dans une section distincte de la feuille de style ou un style tout à fait distinct. Cela laisse moins de la définition des règles pour les éléments plus spécifiques et vous permet d’avoir une plus courte de style de votre principal modèle.

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

un + 3 =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?