Introduction aux différentes méthodes d'expression du formatage du code CSS

Cet article se concentrera sur les différentes manières de formater le CSS, qui sont différentes manières d'organiser le CSS, juste des concepts liés, je pense que l'organisation a plus à voir avec le regroupement et l'ordre des choses, alors que le formatage a à voir avec l'espacement et l'indentation.

Le formatage n'a rien à voir avec la fonctionnalité CSS. Ce ne sont que les choix du programmeur, mais cela ne signifie pas que le formatage n'est pas important pour CSS, tout comme dire que le choix du canevas n'est pas important pour un peintre. C'est faux. à quel point il est facile à lire, à quel point il est facile de naviguer et à quel point il est facile de revoir et de vous refamiliariser avec le CSS précédemment écrit.

La raison pour laquelle il existe tant d'options pour le formatage CSS est qu'il n'y a pas de règles de syntaxe strictes en matière d'espacement et de sauts de ligne. Par exemple :

div      {                width:             50px             }

est le même code que les deux suivants

div{width:50px}

div 

{ 
      width: 50px 
      
}

Format multiligne

.navigation_rss_icon {
position: absolute;
left: 940px;
bottom: 0px;
}
#navigation_rss {
position: absolute;
left: 720px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #897567;
line-height: 2.5em;
}
#navigation_rss li {
display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
color: #fffffe;
text-decoration: none;
padding: 0px 2px;
letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
color: #eed2a1;
text-decoration: none;
}

Je dirais que c'est le plus courant et le plus facile à lire lorsqu'il s'agit de courts extraits de code, c'est pourquoi les tutoriels écrits utilisent le plus souvent ce format. L'exemple ci-dessus n'a pas de ligne vide entre l'accolade fermante et le sélecteur suivant, mais cela est également courant.

Format multiligne avec indentation

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
    }
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

Les blocs en retrait indiquent que le sélecteur est plus petit que son parent ci-dessus est un sélecteur plus spécifique et pointe vers les éléments enfants du sélecteur ci-dessus.

Format sur une seule ligne

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

C'est probablement le format le plus efficace en termes d'espace et de taille, sans compression complète pour supprimer tous les espaces et les nouvelles lignes. Cette technique nécessite un défilement vertical et horizontal minimal lors de l'écriture et de la modification du CSS, mais peut sembler fastidieuse et rendre la navigation et la recherche de ce que vous recherchez quelque peu difficiles.

Format sur une seule ligne avec touche de tabulation

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

Format sur une seule ligne avec indentation

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

Un retrait An sélecteur avancé signifie que la cible du sélecteur est l'élément enfant du sélecteur situé au-dessus.

Format principalement sur une seule ligne

Mon préféré est le format sur une seule ligne car je l'utilise dans un éditeur de texte Soft -Enroulez, donc les longues lignes ne durent pas éternellement et s'enroulent autour des bords de la fenêtre. Ainsi, pour les lignes très longues avec beaucoup de sélecteurs, j'ai ajouté un retour dur et un onglet sur la nouvelle ligne d'attribut.

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Variation

Le formatage d'une seule ligne peut être obtenu en déplaçant le crochet ouvrant sur sa propre ligne, ce que j'ai souvent vu en PHP :

div
{
    padding: 10px;
}

Dans le formatage multiligne avec tabulations, je vois des accolades utilisées comme cloisons de séparation :

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

combinaison

Monoligne et multi- les combinaisons de lignes peuvent regrouper les attributs associés en une seule ligne :

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

Le format que vous choisissez se résume à la lisibilité. Vous devez être capable de naviguer rapidement dans CSS, de trouver ce que vous recherchez et d'apporter des modifications rapidement. Si vous trouvez le format sur une seule ligne difficile parce qu'il est difficile pour votre œil de trouver l'attribut que vous recherchez, vous devez éviter de l'utiliser.

Personnellement, je trouve le format multiligne plus facile à lire, mais il augmente la longueur (comme le nombre réel de lignes) de 5 à 8 fois. Cela rend en fait l'ensemble du document moins lisible pour moi en raison de tout le défilement vertical. Si votre moniteur est un peu étroit, le format sur une seule ligne peut provoquer un défilement horizontal, parfois pire.

Formatage parfait qui maximise la lisibilité tout en minimisant le défilement. De plus, dans un sens plus abstrait, il suffit que cela se sente bien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!