CSS Struktur

CSS Struktur

CSS ist schon überall im Einsatz ohne geht gar nicht eh klar – doch schaut man sich von den Seiten die CSS Datein mal etwas genauer an kann man sofort erkennen das fast jede anders strukturiert wurde!\r\nHier ein paar Tipps wie ich bei Kunden die CSS Datei aufbaue und Struktur in die Datei bringe!\r\n

    \r\n

  • Kommentare sind wichtig – man kann an jeder Stelle in der Datei damit Arbeiten mit den /* leitet man ein Kommentar ein und mit */ beendet man es! Dazwischen kann alles stehen!
  • \r\n

  • weiters sollte man nicht die Schreibweise beachten!\r\n1. Bedingung – 1. Zeile\r\nviele Bedingungen – viele Zeilen\r\n\r\n.name { border: 0; }\r\n\r\n.name {\r\n    background: #fff;\r\n    float: left;\r\n    padding: 0;\r\n}
  • \r\n

  • Im Beispiel oben kann man auch sofort erkennen wie der 2. Block aufgebaut ist – ich verwende immer einen TAB!\r\n.name {\r\nbackground: #fff;\r\nfloat: left;\r\npadding: 0;\r\n}\r\n.name {\r\nbackground: #fff;\r\nfloat: left;\r\npadding: 0;\r\n}\r\nDiese Art wird schnell unübersichtlich vor allem wenn es sehr viele Zeilen gibt! Hier schaut diese schon viel besser aus!\r\n.name {\r\n    background: #fff;\r\n    float: left;\r\n    padding: 0;\r\n}\r\n.name {\r\n    background: #fff;\r\n    float: left;\r\n    padding: 0;\r\n}
  • \r\n

  • Man sollte immer die Kurzschreibweise von CSS verwenden zb.\r\n.name {\r\npadding-left:2px;\r\npadding-right:2px;\r\n}\r\nSchöner ist:\r\n.name { padding:0 2px;}
  • \r\n

\r\nMit diesen paar Tipps könnte ein schönes CSS so aussehen:\r\n\r\n/* HEADER Begin */\r\n\r\n.header { padding:2px 10px; }\r\n\r\n.content {\r\n    padding:2px 10px;\r\n    font-size:12;\r\n}\r\n    .head {\r\n    …\r\n    }\r\n    .text {\r\n    …\r\n    }\r\n        .text a {\r\n        …\r\n        }\r\n        .text a:hover {\r\n        …\r\n        }\r\n….\r\n/* HEADER Ende*/

2 Kommentare

  1. Ein gute Möglichkeit wäre für das Produktivsystem noch, den Code zu komprimieren\r\n\r\nhttp://compressor.ebiene.de/

  2. Hallo Michael,\r\n\r\nAlso danke für diesen Link – finde es auch eine SUPER Sache jedoch hat das ganze einen kleinen HACKEN – du kannst das File nicht mehr Bearbeiten!\r\n\r\nMan müsste das also doppelt ablegen einmal lesbar und einmal optimiert – jedoch ist das dann bei 50-100 Kunden nicht mehr lustig oder – wie machst du das in diesem Fall?\r\n\r\nAber DANKE für den Link finde es super!\r\n\r\nLG\r\nT3 Center

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.