CSS kann eine extrem leistungsstarke Auszeichnungssprache für Designer sein.
Das CSS, das erstellt wird, ist jedoch nur so gut wie die Prinzipien, die vom Designer beim Erstellen des Codes befolgt werden.
Während Sie vielleicht denken, dass jeder CSS herausbringen kann, gibt es einen großen Unterschied zwischen dem Schreiben von CSS und dem Erstellen von erstklassigem CSS.
Um sicherzustellen, dass Sie auf dem richtigen Weg sind, sind hier acht CSS-Prinzipien, denen jeder Webdesigner folgen sollte.
Wenn Sie die Zeit in die Codierung von CSS investieren, ist es nur sinnvoll, sich Zeit zu nehmen bestätigen der Code, den Sie erstellen. Es erstaunt mich immer wieder, wie viele Designer diesen entscheidenden Schritt überspringen. Durch die Validierung Ihres Codes können Sie Probleme beheben und sicherstellen, dass sie für Ihre Besucher gut funktionieren.
Neben der Validierung Ihrer CSS-Datei sollten Sie auch Ihre HTML- oder XHTML-Dateien validieren. Bevor Sie diese Dateien validieren, vergewissern Sie sich, dass Sie sich die Zeit genommen haben, den richtigen HTML- oder XHTML-DOCTYPE zu deklarieren. Die Deklaration Ihres DOCTYPE mag ein banales Detail sein, aber ich kann nicht zählen, wie viele Diskussionen ich mit frustrierten Designern hatte, die weiterhin Probleme mit einem Design hatten, nur um herauszufinden, dass es einen veralteten DOCTYPE (oder hatte überhaupt keinen DOCTYPE deklariert).
Unabhängig davon, ob Sie alleine oder mit einem Team von Designern an einem Projekt arbeiten, ist es wichtig, die von Ihnen erstellte Arbeit zu dokumentieren. Sie werden wahrscheinlich sehen, warum dies im Kontext eines Designteams wichtig ist, aber Sie fragen sich vielleicht, warum es wichtig wäre, wenn Sie an einem Solo-Projekt arbeiten. Nun, es besteht immer die Möglichkeit, dass sich Ihr Solo-Projekt zu einem Gruppenprojekt entwickelt. Wenn dies geschieht, ist es viel einfacher, eine Dokumentation zur Hand zu haben, als zu versuchen, sie zurückzuverfolgen und zu erstellen. Aber selbst wenn Ihr Projekt eine Ein-Mann-Show bleibt, werden Sie vielleicht überrascht sein, wie nützlich Dokumentation ist, wenn Sie sich dazu entschließen, ein Projekt erneut zu besuchen, nachdem Sie es ein Jahr lang nicht betrachtet haben.
Wenn es darum geht, Dokumentation für CSS-Code zu erstellen, besteht der natürliche Impuls der meisten Designer darin, sie direkt in ihren Code einzufügen, indem sie zwischen / * und * / gesetzt werden. Wie bei vielen der Prinzipien in dieser Liste ist dieser Ansatz technisch nicht falsch. Das direkte Hinzufügen von Kommentaren zu Ihrem CSS-Code erhöht jedoch die Größe der Datei, was wiederum die Ladezeiten erhöhen und die Gesamtleistung einer Website verlangsamen kann. Wenn Sie es vorziehen, erstklassigen CSS-Code zu schreiben, sollten Sie Ihren Code dokumentieren, aber in einer separaten Datei.
Obwohl ich ehrlich glaube, dass es effektiver ist, in einer separaten Datei zu dokumentieren, weiß ich, dass es viele Dateien gibt, die dieser Praxis einfach nicht zustimmen. Wenn Sie sich weigern, in einer separaten Datei zu dokumentieren, können Sie als Nächstes einen CSS-Komprimierer verwenden (selbst wenn Sie eine separate Datei für die Dokumentation verwenden, können Sie trotzdem von einem CSS-Komprimierer profitieren). Sie können dies verwenden CSS-Komprimierer von CSS Drive Gallery, oder suchen Sie einfach Google, um einen alternativen CSS-Komprimierer zu finden.
Obwohl Hacks für viele innerhalb der CSS-Community zu einer akzeptablen Praxis geworden sind, bedeutet dies nicht, dass "CSS-Hacking" ein Prinzip ist, dem Sie folgen sollten. Das Problem bei diesem Designansatz ist, dass Sie bewusst nach einer komplizierten Problemlösung suchen. Während Sie vielleicht denken, dass ein oder zwei Hacks hin und wieder niemandem schaden werden, kann es sich negativ auf Ihre allgemeine Design-Mentalität auswirken, wenn Sie in die Denkweise des "Durchhackens" von Problemen einsteigen.
Vermeiden von Hacks ist ein Ratschlag, den Experten seit einiger Zeit austeilen. Sie können den ganzen Weg zurück bis 2003 gehen und das sehen Peter-Paul Koch (Wer ist ein versierter Entwickler und Autor) warnt Designer seit einiger Zeit vor den Implikationen von CSS-Hacks: "Das Komplexitätsmonster ist wieder aufgetaucht, mitten im Zentrum der modernen Webentwicklung. Heutzutage manifestiert es sich nicht als endlos verschachtelter Tisch, sondern als endlos komplizierter CSS-Hack. "
Da divs ein hohes Maß an Flexibilität bieten, kann es leicht sein, sie zu oft zu verwenden. In der Tat ist dieses Thema unter Designern so häufig geworden, dass die CSS-Community einen eigenen Begriff erstellt hat, um dieses Problem zu kennzeichnen: divitus. Um zu vermeiden, Opfer dieser Bedingung zu werden, bevor Sie automatisch ein div-Tag verwenden, sollten Sie sich immer fragen, ob es ein tatsächliches HTML-Tag gibt, das die Arbeit für Sie erledigt. Anstatt beispielsweise mehrere header divs zu erstellen, verwenden Sie die HTML-Überschrift-Tags, die bereits verfügbar sind, z. B. H1 und H2?
Sobald Sie das Problem der divs in Betracht ziehen, werden Sie schnell die Vorteile der Verwendung des entsprechenden HTML-Tags sehen, anstatt automatisch ein neues div zu erstellen. Es kann nicht nur die Menge an Code reduzieren, die Sie erstellen müssen (was Ihnen Zeit spart und die Ladezeit Ihrer Website reduziert), sondern auch Ihrem Code eine logischere Struktur verleihen.
Wenn Sie einen neuen oder unerfahrenen Designer fragen, wie sie sich entscheiden, ihre Klassen zu benennen, könnten sie sagen, dass es nicht wirklich wichtig ist. Obwohl dies technisch richtig ist, ist dies eine sehr kurze Sicht auf die Benennung von CSS-Klassen. Obwohl es Designer gibt, die in die Kategorie fallen, sich nicht um CSS-Klassennamen zu kümmern, gibt es auch Designer, die an ihre Klassennamen denken, aber sie gehen tatsächlich den falschen Weg.
Da ich Sie nicht einfach mit theoretischen Beispielen über den Kopf schlagen will, lassen Sie mich das konkret erklären. Angenommen, Sie erstellen eine Klasse, um eines der Felder auf Ihrer Seite zu steuern. Die Box befindet sich unten auf der Seite, sie enthält Kommentare von Lesern und Sie verwenden CSS, um einen Hintergrund zu erstellen und das Padding zu kontrollieren. Anstatt diese .tan-Box zu benennen (was viele wohlmeinende Designer tun würden), nenne es .comment-box. Der Grund, dass die .cment-Box ein besserer Klassenname ist als .tan-box, liegt daran, dass Sie die Hintergrundfarbe in blau ändern (oder das Feld vom unteren Rand der Seite in einen anderen Bereich verschieben). Es wird Sie oder einen anderen Designer, der über das CSS nach dieser Website sucht, nicht verwirren.
Während Kurzschreibweise für Designer, die erst anfangen , ihren eigenen CSS-Code zu schreiben, verwirrend sein kann , wird es zu einer der effektivsten Praktiken, der Sie als Designer folgen können , sobald Sie sich an den Stil der Kurzschrift gewöhnt haben .
Die Verwendung von Kurzschrift hat mehrere Vorteile. Zum einen reduziert es die Größe Ihrer Dateien, was die Ladezeit Ihrer Website reduziert. Darüber hinaus vereinfacht es nicht nur das Organisieren Ihres Codes, sondern erleichtert auch die Arbeit, wenn Sie in der Zukunft Änderungen an Ihrem Code vornehmen müssen. Wenn Sie sich an die Kurzschrift anpassen, sollten Sie auch in der Praxis Ihren Code in einer Zeile schreiben (anstatt Deklarationen über mehrere Zeilen zu verteilen).
Als Designer sind Sie technisch viel mehr geneigt als jeder andere in der Mainstream-Bevölkerung. Weil Sie Teil einer Minderheit sind, die Technologie lebt und atmet, gibt es eine Menge Gewohnheiten, an die die meisten anderen Menschen nie gedacht haben. Zum Beispiel, Sie haben wahrscheinlich aus dem Weg, um so viel von der "Papierspur" wie möglich in Ihrem Leben zu beseitigen. Es ist jedoch wichtig, daran zu denken, dass die Mehrheit der Bevölkerung die Dinge immer noch regelmäßig ausdruckt. Während Sie ein Element möglicherweise mit del.icio.us markieren, wenn Sie es zur späteren Verwendung speichern möchten, druckt der durchschnittliche Internetbenutzer dieselbe Seite aus.
Da Benutzer immer noch Informationen aus dem Internet ausdrucken, ist es wichtig, CSS zu verwenden, um den Inhalt druckerfreundlich zu gestalten . Besucher werden all die Arbeit schätzen, die Sie in die Gestaltung eines schönen Layouts für die von Ihnen besuchte Website investiert haben. Wenn sie sich jedoch dazu entschließen, eine Seite von dieser Website auszudrucken, werden sie Sie noch mehr schätzen, wenn sie feststellen, dass ihr Ausdruck nur die Website enthält Text, den sie wollen (und keine der erstaunlichen Grafiken, die auf ihrem Computer gut aussehen, aber eine Menge Tinte von ihrem Drucker verschwenden würden). Da CSS es sehr einfach macht sicherzustellen, dass Inhalte beim Ausdrucken korrekt formatiert werden, gibt es keine Entschuldigung dafür, dass ein echter Designer diesen Schritt des Designprozesses vernachlässigt.
Sie können denken, dass dieses letzte Prinzip Klischee klingt, aber es ist wohl das wichtigste der ganzen Liste. Wenn Sie daran interessiert sind, der bestmögliche Designer zu sein, müssen Sie sicherstellen, dass Sie immer daran arbeiten, Ihre CSS-Kenntnisse zu erweitern . Glücklicherweise ist dies einfach zu tun, wenn Sie den Wunsch und den Willen haben, Ihre CSS-Ausbildung fortzusetzen. Während Fortbildung für Einzelpersonen in vielen Branchen, die nichttechnischer Natur sind, eine schwierige Aufgabe sein kann, weil das Internet buchstäblich die Basis für CSS ist, ist die Menge an freien Ressourcen, von denen man lernen kann, buchstäblich endlos. Wenn Sie denken, dass ich übertreibe, geben Sie einfach "CSS" in Google ein und Sie werden feststellen, dass 483.000.000 Ergebnisse für Sie verfügbar sind.
Zusätzlich zu Online-Ressourcen (und Druckressourcen, wenn Sie bevorzugen) können Sie viel von anderen CSS-Designern lernen. Ob Sie ihre Arbeit analysieren, den Rat hören, den sie online geben oder mit ihnen in persönlichen Situationen sprechen, Sie können viel Wert gewinnen, wenn Sie mit anderen Designern zusammenarbeiten und potentiell mit ihnen zusammenarbeiten, die sich den Prinzipien von erstklassiges CSS-Design und die Herstellung von erstaunlichen Stücken Arbeit.