Der Programmierstil ist wie die Persönlichkeit einer Person. Verschiedene Programmierer (Designer) haben oft unterschiedliche Schreibstile. Ein guter Stil ist für andere leichter zu akzeptieren. Am Beispiel von WordPress-Themes bevorzugen wir möglicherweise die Verwendung von Theme-Dateien mit gutem Codestil und unserem Geschmack. Und was machen wir, wenn wir diese unordentlichen, schwer lesbaren CSS-Dateien studieren müssen? Mit „Styleneat“ können Sie CSS-Selektoren, Unterselektoren und Eigenschaften entsprechend einer kaskadierenden Struktur neu organisieren und erstellen, wodurch die CSS-Datei übersichtlicher und lesbarer wird. Es ist einfacher, Seitenlayouts zu definieren und die Beziehungen zwischen verschiedenen Strukturen zu erkennen.
Der Reorganisationsdienst „
Styleneat “ für CSS-Dateistrukturformate kann CSS-Dateien mit chaotischen Schreibstilen in eine kaskadierende Struktur umstrukturieren, um Ihnen das Lesen und Recherchieren zu erleichtern. Es handelt sich um ein sehr praktisches Online-Tool.
Sie können es auf drei verschiedene Arten verwenden: 1. Fügen Sie den Code direkt ein. 2. Laden Sie die CSS-Datei hoch. 3. Geben Sie die Adresse der CSS-Datei ein. Es gibt auch einige Optionseinstellungen: Sortierung in alphabetischer Reihenfolge nach CSS-Eigenschaften und Selektoren; Reorganisation des importierten mehrzeiligen oder einzeiligen Formats;
Werfen wir einen Blick auf die Wirkung der Nutzung:
Originalcode:
Beispiel-Quellcode
[www.downcodes.com]
#menubar .menus {
Hintergrund:#E9EEF1;
float:left;
Polsterung:0 10px;
}
#menubar .menus li {
float:left;
Rahmenstil:solid;
Rahmenfarbe:#FFF;
Rahmenbreite:0 1px;
margin-left:-1px;
Listenstiltyp:none;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
Hintergrund:#EEDDCC;
Listenstiltyp:none;
}
#menubar .menus .current_page_item {
Hintergrund:#FFF;
Schriftstärke:fett;
}
#menubar .menus li.current_page_item a:hover {
Hintergrund:#FFF;
}
Umstrukturierter Code:
Beispiel-Quellcode
[www.downcodes.com]
#menubar .menus {
Hintergrund:#E9EEF1;
float:left;
padding:0 10px }
#menubar .menus li {
float:left;
Rahmenstil:solid;
Rahmenfarbe:#FFF;
Rahmenbreite:0 1px;
margin-left:-1px;
Listenstiltyp:none }
#menubar .menus li a {
Anzeige:Block;
Textdekoration: keine;
padding:5px 10px }
#menubar .menus li a:hover {
Hintergrund:#EEDDCC;
Listenstiltyp:none }
#menubar .menus .current_page_item {
Hintergrund:#FFF;
Schriftstärke:bold }
#menubar .menus li.current_page_item a:hover {background:#FFF;
