Einführung in verschiedene Ausdrucksmethoden der CSS-Codeformatierung

Dieser Artikel konzentriert sich auf unterschiedliche Arten der CSS-Formatierung, also unterschiedliche Arten der CSS-Organisation, nur verwandte Konzepte. Ich denke, Organisation hat mehr mit dem Gruppieren und Ordnen von Dingen zu tun, während Formatierung mit Abstand und Einrückung zu tun hat.

Formatierung hat nichts mit der Funktionalität von CSS zu tun. Dies sind nur die eigenen Entscheidungen des Programmierers, aber das bedeutet nicht, dass die Formatierung für CSS nicht wichtig ist, genauso wie die Aussage, dass die Wahl der Leinwand für einen Maler nicht wichtig ist. Dies ist falsch. wie einfach es zu lesen ist, wie einfach es zu navigieren ist und wie einfach es ist, zuvor geschriebenes CSS noch einmal zu lesen und sich wieder damit vertraut zu machen.

Der Grund dafür, dass es so viele Optionen für die CSS-Formatierung gibt, ist, dass es keine strengen Syntaxregeln gibt, wenn es um Abstände und Zeilenumbrüche geht. Zum Beispiel:

div      {                width:             50px             }

ist der gleiche Code wie die folgenden beiden

div{width:50px}

div 

{ 
      width: 50px 
      
}

Mehrzeiliges Format

.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;
}

Ich wage zu behaupten, dass dies das gebräuchlichste und am einfachsten zu lesende Format ist, wenn es um kurze Codeausschnitte geht, weshalb dieses Format in schriftlichen Tutorials am häufigsten verwendet wird. Im obigen Beispiel gibt es keine Leerzeile zwischen der schließenden Klammer und dem nächsten Selektor, aber das kommt auch häufig vor.

Mehrzeiliges Format mit Einrückung

.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;
        }

Ein eingerückter Block zeigt an, dass sich der Selektor darüber befindet. Das übergeordnete Element ist ein Mehr spezifischer Selektor und zeigt auf das untergeordnete Element des obigen Selektors.

Einzeiliges Format

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 }

Dies ist wahrscheinlich das platz- und größeneffizienteste, ohne vollständige Komprimierung, um alle Leerzeichen und Zeilenumbrüche zu entfernen. Diese Technik erfordert minimales vertikales und horizontales Scrollen beim Schreiben und Bearbeiten von CSS, kann jedoch umständlich wirken und die Navigation und das Finden des Gesuchten etwas erschweren.

Einzeiliges Format mit Tabulatortaste

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; }

Einzeiliges Format mit Einrückung

#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; }

Ein eingerückter Selektor Zeigt an, dass der Selektor zielt auf die untergeordneten Elemente des Selektors darüber ab.

Hauptsächlich einzeiliges Format

Mein Favorit ist das einzeilige Format, weil ich es in einem Texteditor Soft verwende -Umwickeln, damit lange Linien nicht ewig halten und sich um die Fensterkanten wickeln. Deshalb habe ich für sehr lange Zeilen mit vielen Selektoren einen harten Return und eine Tabulatortaste in der neuen Attributzeile hinzugefügt.

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

Einzeilige Formatierung kann weiter erreicht werden, indem die öffnende Klammer in eine eigene Zeile verschoben wird, was ich in PHP schon oft gesehen habe:

div
{
    padding: 10px;
}

Im mehrzeiligen Format mit Tags sehe ich geschweifte Klammern als Trennwände:

#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; }

Kombiniert

Einzel- und mehrzeilig Eine Kombination von kann verwandte Eigenschaften gruppieren eine einzelne Zeile:

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

Beim gewählten Format kommt es auf die Lesbarkeit an. Sie müssen in der Lage sein, schnell im CSS zu navigieren, das Gesuchte zu finden und schnell Änderungen vorzunehmen. Wenn Sie das einzeilige Format als schwierig empfinden, weil Ihr Auge das gesuchte Attribut nur schwer erkennen kann, sollten Sie es vermeiden.

Ich persönlich finde das mehrzeilige Format gut lesbar, aber es erhöht die Länge (wie bei der tatsächlichen Anzahl der Zeilen) um das 5- bis 8-fache. Dadurch ist das gesamte Dokument aufgrund des vertikalen Scrollens für mich weniger lesbar. Wenn Ihr Monitor etwas schmal ist, kann das einzeilige Format zu horizontalem Scrollen führen, manchmal sogar noch schlimmer.

Perfekte Formatierung, die die Lesbarkeit maximiert und gleichzeitig das Scrollen minimiert. Außerdem muss es sich in einem abstrakteren Sinne einfach richtig anfühlen.

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Ausdrucksmethoden der CSS-Codeformatierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!