Sie programmieren bereits eine Weile und kennen sich mit einer CSS-Datei aus. Du bist sicherlich kein Meister, aber mit genug Geigen kannst du dorthin gelangen, wo du hin willst. Sie fragen sich jedoch, ob Sie jemals an jenem Punkt vorüberkommen werden, an dem CSS so schwierig ist. Werden Sie jemals in der Lage sein, ein komplexes Layout herauszuschlagen, ohne letztendlich zu versuchen, zu prüfen, was funktioniert und was nicht?
Die gute Nachricht ist, dass Sie tatsächlich an dem frustrierenden Punkt vorbeikommen können, an dem Sie genug CSS-Code zum Codieren einer Website kennen, es fehlt jedoch die solide Grundlage, die es Ihnen ermöglicht, zu codieren, ohne den Ärger darüber zu haben, dass Sie nicht genau wissen, wie Sie dorthin gelangen. gehen, und dieser Punkt ist viel näher als Sie denken. Ich schlage vor, dass es fünf Themen gibt, die Ihr Verständnis von CSS drastisch verbessern werden. Lesen Sie in den nächsten vierundzwanzig Stunden etwas Zeit und lesen Sie die Codierungsmethode für immer.
1. Hüllen Sie Ihren Verstand um Positionierungskontexte
Wenn Sie wirklich ein solides Verständnis dafür haben möchten, wie Sie HTML-Elemente mithilfe von CSS an den gewünschten Ort verschieben können, müssen Sie unbedingt Positionierungskontexte in den Griff bekommen. Und ich meine nicht nur ein zufälliges Verständnis, ich meine ein tiefes Wissen über ihre Unterschiede, Verhaltensweisen, Macken usw.
Es gibt tatsächlich fünf Positionswerte, die Sie verstehen sollten. Wenn Sie nicht alle fünf benennen können, ohne sie nachzuschlagen, sind Sie definitiv ein erstklassiger Kandidat für diesen Teil der Ausbildung. Hier sind sie: statisch, fest, relativ, absolut und vererbbar.
Sie müssen alle fünf kennen und verstehen, aber die großen zwei, die die Art und Weise, in der Sie programmieren, wirklich ändern, sind die absolute und relative Positionierung. Wenn Sie lernen, diese beiden Positionierungskontexte separat zu verwenden, und dann in die Zusammenarbeit einsteigen, wird sich die Art und Weise, wie Sie das CSS-Layout betrachten, grundlegend ändern, das verspreche ich Ihnen. Eine Offenbarung, die Ihren Job unendlich einfacher macht.
Ressourcen, um Sie dorthin zu bringen
Der Niedergang bei der absoluten vs. relativen Positionierung
Dies ist mein tiefer Einstieg in das Thema Positionierungskontext. Ich erwähne und erkläre kurz alle fünf, konzentriere mich aber auf die großen zwei: Wie unterscheiden sie sich, wie unterscheiden sie sich und wie arbeiten sie zusammen? Lesen Sie diesen Artikel durch und Sie werden auf dem besten Weg sein, um CSS-Positionierungen ohne Kopfschmerzen durchzuführen.
CSS-Positionierung 101
Dieses Stück kommt vom ehrwürdigen Eine Liste getrennt Blog so sofort wissen Sie, dass es gründlich und unglaublich lehrreich sein wird. Der Artikel wurde bereits 2010 veröffentlicht, aber die Informationen sind immer noch relevant und dienen als Einführung in alle fünf Positionierungskontexte. Es ist kein sehr visueller Artikel, aber es gibt viele einfache Codebeispiele, um Sie in jedes Konzept einzuführen.
Lernen Sie CSS-Positionierung in zehn Schritten
Dies ist ein fantastisch kurzer Überblick über die verschiedenen Positionierungskontexte. Anstelle eines langgezogenen Artikels enthält diese Seite eine kleine Box mit zehn Registerkarten. Jede Registerkarte enthält ein kleines Code-Snippet und ein oder zwei Sätze, die den Code erläutern. Rechts davon befindet sich ein Live-Beispiel-Layout, das mit jeder Registerkarte aktualisiert wird. Dieses Format eignet sich hervorragend für die visuelle Verknüpfung von Code-Snippets mit den von ihnen erzeugten Layouts. Ich empfehle es dringend, einen Blick darauf zu werfen, wenn Sie mit Texterklärungen wie den oben genannten von ALA kämpfen.
2. Meisterschwimmer
Wenn Sie zum ersten Mal mit CSS vertraut sind, scheinen Floats eines der am meisten vermasselten Layout-Systeme zu sein, die man sich vorstellen kann. Wenn Sie lernen, sie auf einer grundlegenden Ebene zu verwenden, müssen Sie alles darüber lernen, wie Eltern, die nur Kinder enthalten, die zusammengeklappt sind, eine eingestürzte Höhe haben. Dies führt zu 47 verschiedenen Möglichkeiten, das Problem durch Clearfixes und Überlaufmanipulationen zu lösen.
Glücklicherweise gewöhnen Sie sich auf lange Sicht an die Konzepte von Schwimmern, und diese können sogar so einfach zu bedienen sein, dass Sie nicht viel darüber nachdenken. Das einzige, was zwischen Ihnen und diesem Ziel steht, ist ein oder zwei solide Artikel, die wirklich das Floatverhalten und die Techniken von Grund auf gründlich erklären.
Ressourcen, um Sie dorthin zu bringen
Alles, was Sie über CSS-Floats noch nicht wussten
In diesem Artikel werde ich fast die gesamte Bandbreite an Themen bezüglich Floats in CSS abdecken. Es beginnt mit einer grundlegenden Diskussion darüber, was Schwimmer sind und wie sie funktionieren. Danach spreche ich darüber, wie Schwimmer die Kästen der betroffenen Elemente beeinflussen, wie Schwimmer mit Elementen unterschiedlicher Höhe komisch werden, die neun Regeln, die das Schwimmerverhalten abdecken, und natürlich das kollabierende Höhendebakel und wie man es beheben kann.
Alles über Schwimmer
Chris Coyier war schon immer mein Lieblingsautor, wenn es um CSS-bezogene Themen geht. Seine Einführung in Floats enttäuscht nicht. Wenn Sie nach einer kurzen, aber einfachen Diskussion über die Arbeit mit Schwimmern suchen, haben Sie mit diesem Artikel etwas zu tun. Ich mag besonders die einfachen, attraktiven Illustrationen, die im Artikel verwendet werden.
Das Geheimnis der CSS-Float-Eigenschaft
Während Chris Coyiers Stücke in der Regel kurz und auf den Punkt gebracht werden, ist der Inhalt des Smashing Magazine in der Regel recht umfangreich, mit vielen Beispielen und relevanten Diskussionen. In diesem Artikel wird das Konzept der Floats vorgestellt, alles über deren Verwendung und Löschen erläutert und anschließend eine Diskussion darüber eingeleitet, wo Floats normalerweise in realen Standorten verwendet werden. Wenn Sie die Theorie lebendig sehen müssen, ist dies eine für Sie.
3. Kennen Sie Ihre Selektoren
Ein Schlüssel zum Schreiben eines guten, sauberen CSS ist, dass Sie genau wissen, welche CSS-Selektoren Ihnen zur Verfügung stehen, wie sie funktionieren und wie stark sie von verschiedenen Browsern unterstützt werden. Es klingt nach einem einfachen Thema, aber in Wirklichkeit ist die Welt der CSS-Selektoren sehr komplex.
Hier gibt es eine Menge interessanter Dinge zu lernen, von der Verwendung von Attributwert-Selektoren und dem Ausrichten von Schlüsselwörtern in Klassennamen bis hin zu der Frage, wie der universelle Selektor beim Debuggen von Code hilfreich sein kann. Selbst wenn Sie der Meinung sind, dass Sie persönlich ohne ein paar ausgefallene Selektoren auskommen können, ist die Wahrheit, dass andere Codierer dieses Zeug jeden Tag verwenden und Sie müssen in der Lage sein zu verstehen, was Sie sehen, wenn Sie auf Quelltext klicken.
Ressourcen, um Sie dorthin zu bringen
CSS-Selektoren: Nur die kniffligen Bits
Dies ist ein lustiger Artikel, der sich vor allem mit den komplizierteren Aspekten von CSS-Selektoren befasst. Ich überspringe die Dinge auf der obersten Ebene und springe direkt zu der Diskussion, wie das Konzept des DOM für die Ausrichtung verschiedener Aspekte Ihres Dokuments mit CSS übersetzt wird. Sie erfahren alles über das Auswählen von Kindern und Geschwistern, das Ketten von Selektoren und vieles mehr.
Die 30 CSS-Selektoren, die Sie sich merken müssen
Jeffrey Way ist ein Web-Dev-Rockstar, und Artikel wie dieser beweisen, warum. Dieser Artikel von Nettuts + behandelt eine breite Palette von CSS-Selektoren in einem einfachen und kurzen Format, das die Unterstützung des Browsers besonders hervorhebt. Erstaunlicherweise codierte Jeff sogar Live-Beispielseiten für jeden der dreißig Selektoren.
CSS-Attributselektoren: Wie und warum sollten Sie diese verwenden?
Attributwertselektoren sind eine der leistungsfähigsten Untermengen von CSS-Selektoren, und CSS3 steigert diese Leistung wirklich. Sie werden nicht glauben, wie vielseitig Ihre Selektoren mit einer kleinen magischen Eigenschaft sein können. Nachdem Sie diesen Artikel gelesen haben, werden Sie sich um Sätze wie "willkürliche Attributwertauswahl" für Unterzeichenketten kümmern. wie ein Profi.
4. Lernen Sie DRY-Codierungskonzepte
Wiederholen Sie sich nicht. Dieser einfache Ausdruck hat drastische Auswirkungen auf die Codierung. Wenn Sie sich wirklich mit DRY-Codierverfahren beschäftigen, ist das Ergebnis reinerer Code, weniger Arbeit und ein schöner neuer Workflow, der ebenso ermächtigend wie geradezu fantastisch ist.
Im Gegensatz zu den anderen oben genannten Themen, die ziemlich eng sind, handelt es sich hierbei um ein ziemlich umfangreiches Thema, das alle möglichen Praktiken, Techniken und Ideen abdeckt. Interessanterweise ist der Einsatz von CSS-Präprozessoren eines der Dinge, die mich in letzter Zeit auf DRY-Codierverfahren fokussiert haben.
Obwohl viele behaupten, dass Präprozessoren zu schlechten Kodierungspraktiken führen, ist die Realität das Gegenteil. Selbstverständlich helfen Präprozessoren selbst, manuelle Wiederholungen zu vermeiden, aber das geht darüber hinaus. Die Untersuchung der Ausgabe von Tools wie LESS und SASS und der Ziele für die Sprachen im Allgemeinen hat dazu geführt, dass ich besseres reines CSS schreibe! Wenn Sie Konzepte wie @extend in Sass beherrschen, können Sie nicht anders als über die Auswirkungen nachzudenken, wenn Sie nur mit CSS programmieren.
Ressourcen, um Sie dorthin zu bringen
DRY CSS: Wiederholen Sie Ihr CSS nicht
In diesem Artikel stellt Ihnen Steven Bradley das Thema DRY CSS vor und behandelt einige der wichtigsten Prinzipien und Ziele. Er bringt die Praxis auf drei einfache Ideen und zeigt Ihnen, wie Sie diese Ideen in einem echten Arbeitsablauf umsetzen können. Die Konzepte werden größtenteils von einer Jeremy Clarke-Präsentation zum selben Thema übernommen.
Eine Einführung in objektorientiertes CSS (OOCSS)
Wie bereits erwähnt, sind die der DRY-CSS-Bewegung innewohnenden Ideen ziemlich weitreichend und stehen in direktem Zusammenhang mit Konzepten in anderen Konstrukten. OOCS ist eine immer populärer werdende Methodik, mit der Sie schnellere, effizientere Stylesheets mit überragender Organisation und weniger Wiederholungen erstellen können. In OOCS gibt es zwei Hauptprinzipien: Trennung der Struktur von der Haut und Trennung der Behälter und des Inhalts. Dieser Artikel des Smashing Magazine führt Sie durch die grundlegenden Ideen und hilft Ihnen, sie bei Ihrer eigenen Arbeit anzuwenden.
Eine Einführung in die SMACSS-Richtlinien zum Erstellen von CSS
Erinnern Sie sich an Steven Bradley aus dem ersten Artikel über DRY CSS? Er schrieb auch dieses Stück, in dem ein Projekt erläutert wird, das OOCS ähnlich ist, sich jedoch von ihm unterscheidet: SMACSS (ein Projekt von Jonathan Snook). Wie bei OOCSS verfolgt SMACSS zwei Hauptziele. Die erste besteht darin, den semantischen Wert eines Abschnitts von HTML und Inhalten zu erhöhen, und die zweite besteht darin, die Erwartung einer bestimmten HTML-Struktur zu verringern. In diesem Artikel werden beide Ziele detailliert erläutert und hilfreiche Codebeispiele bereitgestellt, damit Sie SMACSS in Aktion sehen können.
5. Kennen Sie Ihren Browser-Support
Der fünfte und letzte Schlüssel zur Verbesserung Ihres CSS besteht darin, zu wissen, was wo funktioniert. CSS3 ist viel zu verlockend, als dass die meisten von uns es ignorieren könnten, aber die harte Wahrheit ist, dass ein ganzer Haufen davon in bestimmten Browsern nicht funktioniert (mit bestimmten Browsern - ich meine natürlich IE).
Das große Geheimnis, das Webentwickler für Neulinge in den Kopf bekommen müssen, ist nicht, dass sie sich jedes einzelne CSS-Feature merken müssen und wie jeder bekannte Browser damit umgehen soll. Stattdessen gibt es absolut erstaunliche Ressourcen, die Ihnen diese Informationen geben frei, man muss nur wissen, wo man suchen muss.
Ressourcen, um Sie dorthin zu bringen
Browser-Unterstützung in CSS3 und HTML5: Unbezahlbare Ressourcen für den heutigen Einsatz
In diesem Artikel stelle ich Ihnen die relativ wenigen Websites vor, die ich zur Überprüfung der Browser-Unterstützung mit Lesezeichen versehen habe. Diese Ressourcen sind fantastisch, visuell und geben Ihnen die Informationen, die Sie im Handumdrehen benötigen, so dass Sie wieder mit dem Programmieren beginnen können. Schau mal, was sie sind!
Browserunterstützung für CSS3: Wie ist der aktuelle Status?
Dieser Artikel wurde vor über einem Jahr geschrieben, damit der? Aktuelle Status? Stück ist fraglich, aber in dieser Zeit hat sich nicht genug geändert, um die Informationen in diesem Artikel zu veralten. Es bietet einen unglaublich hilfreichen Überblick über verschiedene CSS3-Eigenschaften, die in Abschnitte unterteilt sind, die darauf basieren, was überall funktioniert und worauf Sie achten müssen. Es dauert nur ein paar Minuten, um durchzugehen, und es ist das Lesen wert.
Die Bedeutung der Cross-Browser-Kompatibilität: Tipps und Ressourcen
Wenn Sie mit CSS wirklich neu sind und eine grundlegende Einführung in das Thema Browserkompatibilität benötigen und warum es wichtig ist, werden Sie in diesem Noupe-Artikel behandelt. Es handelt sich nicht nur um einen bloßen Verkauf von Kompatibilitätsideen, sondern um eine Reihe großartiger Ressourcen, die Sie verwenden können, um maximale Kompatibilität zu gewährleisten. Von besonderem Interesse ist die Liste der Tools, mit deren Hilfe Sie Ihre Website in verschiedenen Browsern testen können.
Ich soll das alles in 24 Stunden lesen?
Ich habe Ihnen fünf absolut kritische Themen vorgestellt, die Sie studieren sollten, und nicht weniger als fünfzehn Artikel, aus denen Sie die Prinzipien lernen können, die Sie kennen müssen. Das ist alles gut und schön, aber in meinem Titel habe ich versprochen, dass Sie an einem Tag besser werden und nicht jeder die Zeit hat, sich hinzusetzen und fünfzehn lange Artikel zu lesen!
Die gute Nachricht ist, dass ich Ihnen drei Artikel zu jedem Thema gegeben habe, damit Sie eine Auswahl haben. Ich habe den Inhalt von jedem ausführlich erklärt, so dass Sie denjenigen auswählen können, der am besten zu Ihnen passt. Denken Sie daran, die Artikel zum Lesen zu wählen, die nicht auf dem basieren, was Sie wissen, sondern was Sie nicht wissen. Machen Sie es sich zum Ziel, die Wissenslücken zu füllen.
Mein Vorschlag ist, den Inhalt oben zu durchsuchen und auszuwählen fünf Artikel zum Lesen (einer aus jedem Abschnitt). Selbst das ist viel an einem Tag, aber die meisten von ihnen sind nicht zu viel mehr als tausend Worte oder so, viele sind weniger. Ich bin zuversichtlich, dass Sie es schaffen können. Wenn nicht, kein Problem. Ändern Sie Ihr Ziel, Ihre CSS-Fähigkeiten in einer Woche zu verbessern, und lesen Sie jeden Tag für fünf Tage einen Ihrer fünf ausgewählten Artikel. Ich garantiere Ihnen, dass Sie ab kommender Woche klarer, präziser, kompatibler und wiederverwendbarer CSS-Code schreiben können.
Welche anderen Konzepte empfehlen Sie?
Nun, da Sie meine fünf wichtigsten Themen gelesen haben, die die Leute verbessern sollten, um ihre CSS-Fähigkeiten zu verbessern, möchte ich von Ihnen hören. Mit welchen anderen Themen haben CSS-Codierer normalerweise Probleme, und welche Ressourcen empfehlen Sie für alle, die mehr erfahren möchten?
Stock Fotos zur Verfügung gestellt von BigStock