5 Schritte zur drastischen Verbesserung Ihrer CSS-Kenntnisse in 24 Stunden
Sie programmieren bereits seit einiger Zeit und kennen sich mit einer CSS-Datei aus. Du bist sicherlich kein Meister, aber mit genug Geigen kannst du dahin gelangen, wo du hin willst. Sie fragen sich jedoch, ob Sie jemals den Punkt überwinden werden, an dem CSS ein solcher Kampf ist. Werden Sie jemals in der Lage sein, ein komplexes Layout zu erstellen, ohne letztendlich auf Versuch und Irrtum zurückzugreifen, um zu sehen, was funktioniert und was nicht?
Die gute Nachricht ist, dass Sie zwar den frustrierenden Punkt überwinden können, an dem Sie genug CSS kennen, um eine Website zu codieren, aber nicht über die solide Grundlage verfügen, auf der Sie codieren können, ohne den Ärger zu haben, nicht genau zu verstehen, wie Sie dorthin gelangen, wo Sie sind. ' Ich gehe, 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. Wenn Sie in den nächsten vierundzwanzig Stunden etwas Zeit damit verbringen, die einzelnen Elemente zu lesen, werden Sie die Art und Weise, wie Sie codieren, für immer ändern.
Entdecken Sie Envato-Elemente
1. Wickeln Sie Ihren Geist um Positionierungskontexte
Wenn Sie wirklich ein solides Verständnis für die Verwendung von CSS zum Verschieben von HTML-Elementen an den gewünschten Ort haben möchten, müssen Sie die Positionierungskontexte unbedingt in den Griff bekommen. Und ich meine nicht nur ein beiläufiges 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, dann sind Sie definitiv ein Hauptkandidat für diese Ausbildung. Hier sind sie: statisch, fest, relativ, absolut und erben.
Sie müssen alle fünf kennen und verstehen, aber die großen zwei, die die Art und Weise, wie Sie codieren, wirklich verändern, sind absolute und relative Positionierungen. Wenn Sie lernen, diese beiden Positionierungskontexte getrennt zu verwenden und dann in ihre Zusammenarbeit einzusteigen, wird sich die Art und Weise, wie Sie das CSS-Layout anzeigen, grundlegend ändern. Es ist eine Offenbarung, die Ihre Arbeit unendlich erleichtert.
Ressourcen, um Sie dorthin zu bringen
Der Überblick über die absolute und relative Positionierung
Dies ist mein tiefer Einblick in das Thema Positionierungskontext. Ich erwähne und erkläre kurz alle fünf, konzentriere mich aber wirklich auf die großen zwei: wie sie sich unterscheiden, wie sie sich unterscheiden und wie sie zusammenarbeiten. Lesen Sie dieses Stück durch und Sie sind auf dem besten Weg, kopfschmerzfreie CSS-Positionierung zu erreichen.
CSS-Positionierung 101
Dieses Stück stammt aus dem ehrwürdigen A List Apart- Blog, sodass Sie sofort wissen, dass es sowohl gründlich als auch unglaublich lehrreich sein wird. Der Artikel wurde bereits 2010 veröffentlicht, aber die Informationen sind immer noch absolut relevant und dienen als großartige Einführung in alle fünf Positionierungskontexte. Es ist kein sehr visueller Artikel, aber es enthält viele einfache Codebeispiele, die Ihnen den Einstieg in jedes Konzept erleichtern.
Lernen Sie die CSS-Positionierung in zehn Schritten
Dies ist ein fantastisch kurzer Überblick über die verschiedenen Positionierungskontexte. Anstelle eines langwierigen Artikels wird auf dieser Seite eine kleine Box mit zehn Registerkarten angezeigt. Jede Registerkarte enthält ein kleines Codefragment und einen oder zwei Sätze, die den Code erklären. Auf der rechten Seite befindet sich ein Live-Beispiellayout, das mit jeder Registerkarte aktualisiert wird. Dieses Format eignet sich hervorragend zum visuellen Verknüpfen von Codefragmenten mit den von ihnen erstellten Layouts. Ich empfehle dringend, es sich anzusehen, wenn Sie mit den meisten Texterklärungen wie der obigen von ALA zu kämpfen haben.
2. Master Floats
Wenn Sie zum ersten Mal CSS lernen, scheinen Floats eines der am meisten vermasselten Layoutsysteme zu sein, die man sich vorstellen kann. Sobald Sie gelernt haben, sie auf einer grundlegenden Ebene zu verwenden, müssen Sie alles darüber lernen, wie Eltern, die nur schwebende Kinder enthalten, eine kollabierte Größe haben, was dann zu siebenundvierzig verschiedenen Möglichkeiten führt, das Problem durch Clearfixes und Überlaufmanipulationen zu lösen.
Glücklicherweise gewöhnt man sich auf lange Sicht an die Konzepte hinter Floats und sie können sogar so einfach zu bedienen sein, dass man sich überhaupt keine Gedanken darüber macht. Das einzige, was zwischen Ihnen und diesem Ziel steht, sind ein oder zwei solide Artikel, die das Verhalten und die Techniken des Schwimmers von Grund auf gründlich untersuchen.
Ressourcen, um Sie dorthin zu bringen
Alles, was Sie nie über CSS Floats wussten
In diesem Artikel werde ich fast die gesamte Bandbreite der Themen in Bezug auf Floats in CSS behandeln. Es beginnt mit einer grundlegenden Diskussion darüber, was Floats sind und wie sie funktionieren. Danach spreche ich darüber, wie Floats die Boxen der beteiligten Elemente beeinflussen, wie Floats mit Elementen unterschiedlicher Höhe komisch werden, die neun Regeln, die das Float-Verhalten und natürlich das Debakel der zusammenbrechenden Höhe abdecken, und wie man es behebt.
Alles über Schwimmer
Chris Coyier war schon immer mein Lieblingsautor, wenn es um CSS-Themen geht, und seine Einführung in Floats enttäuscht nicht. Wenn Sie nach einer kurzen, aber unkomplizierten Diskussion über die Arbeit mit Schwimmern suchen, ist dieses Stück genau das Richtige für Sie. Ich mag besonders die einfachen, attraktiven Illustrationen, die im gesamten Artikel verwendet werden.
Das Geheimnis der CSS Float-Eigenschaft
Während Chris Coyiers Stücke in der Regel kurz und sachlich sind, ist der Inhalt des Smashing Magazine in der Regel recht umfangreich und enthält unzählige Beispiele und relevante Diskussionen. In diesem Artikel wird das Konzept von Floats vorgestellt, es wird alles über deren Verwendung und Löschen erläutert. Anschließend wird erläutert, wo Floats normalerweise an Standorten in der realen Welt verwendet werden. Wenn Sie die Theorie lebendig werden lassen möchten, ist diese für Sie.
3. Kennen Sie Ihre Selektoren
Einer der Schlüssel zum Schreiben von gutem, sauberem CSS besteht darin, genau zu verstehen, welche CSS-Selektoren Ihnen zur Verfügung stehen, wie sie funktionieren und inwieweit sie in verschiedenen Browsern unterstützt werden. Es klingt nach einem recht einfachen Thema, aber in Wirklichkeit ist die Welt der CSS-Selektoren ziemlich komplex.
Hier gibt es eine Menge interessanter Dinge zu lernen, von der Verwendung von Attributwert-Selektoren und der Ausrichtung von Schlüsselwörtern in Klassennamen bis hin zur Frage, wie der universelle Selektor beim Debuggen Ihres Codes hilfreich sein kann. Selbst wenn Sie glauben, dass Sie persönlich auskommen können, ohne eine Reihe ausgefallener Selektoren zu verstehen, ist die Wahrheit, dass andere Programmierer dieses Zeug jeden Tag verwenden und Sie verstehen müssen, was Sie sehen, wenn Sie auf View Source klicken!
Ressourcen, um Sie dorthin zu bringen
CSS-Selektoren: Nur die kniffligen Bits
Dies ist ein unterhaltsamer Artikel, der sich hauptsächlich mit den komplizierteren Aspekten von CSS-Selektoren befasst. Ich überspringe das bodennahe Zeug und gehe direkt auf die Diskussion ein, wie sich das Konzept des DOM auf die Ausrichtung verschiedener Aspekte Ihres Dokuments mit CSS überträgt. Sie erfahren alles über die Auswahl von Kindern und Geschwistern, das Verketten von Selektoren und vieles mehr.
Die 30 CSS-Selektoren, die Sie sich merken müssen
Jeffrey Way ist ein Webentwickler-Rockstar und Artikel wie dieser beweisen, warum. Dieser Artikel zu Nettuts + behandelt eine Vielzahl von CSS-Selektoren in einem einfachen und kurzen Format, bei dem die Browserunterstützung im Vordergrund steht. Erstaunlicherweise hat Jeff sogar Live-Beispielseiten für jeden der dreißig Selektoren codiert.
CSS-Attributselektoren: Wie und warum sollten Sie sie verwenden?
Attributwert-Selektoren sind eine der leistungsstärksten Untergruppen von CSS-Selektoren, und CSS3 steigert diese Leistung wirklich. Sie werden nicht glauben, wie vielseitig Ihre Selektoren mit ein wenig Attributwertmagie werden können. Nachdem Sie diesen Artikel gelesen haben, werden Sie sich wie ein Profi um Phrasen wie "beliebige Auswahl von Attributwerten für Teilzeichenfolgen" drehen.
4. Lernen Sie die DRY-Codierungskonzepte kennen
"Wiederholen Sie sich nicht." Dieser einfache Satz hat drastische Auswirkungen auf die Codierung. Wenn Sie sich wirklich mit DRY-Codierungspraktiken beschäftigen, ist das Ergebnis sauberer Code, weniger Arbeit und ein wunderschöner neuer Workflow, der ebenso leistungsfähig wie fantastisch ist.
Im Gegensatz zu den anderen oben genannten Themen, die ziemlich eng sind, ist dieses Thema ein ziemlich umfangreiches Thema, das alle Arten von unterschiedlichen Praktiken, Techniken und Ideen abdeckt. Interessanterweise ist eines der Dinge, die mich in letzter Zeit auf DRY-Codierungspraktiken konzentriert haben, die Verwendung von CSS-Präprozessoren.
Obwohl viele behaupten, dass Präprozessoren zu schlechten Codierungspraktiken führen, ist die Realität umgekehrt. Natürlich helfen Präprozessoren selbst dabei, manuelle Wiederholungen zu vermeiden, aber es 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 geschrieben habe! Sobald Sie Konzepte wie @extend in Sass beherrschen, müssen Sie über die Auswirkungen nachdenken, wenn Sie nur mit CSS codieren.
Ressourcen, um Sie dorthin zu bringen
DRY CSS: Wiederholen Sie Ihr CSS nicht
In diesem Artikel führt Steven Bradley Sie in das Thema DRY CSS ein und behandelt einige seiner wichtigsten Prinzipien und Ziele. Er fasst die Praxis auf drei einfache Ideen zusammen und zeigt Ihnen, wie Sie diese Ideen in einem realen Workflow umsetzen können. Die Konzepte stammen größtenteils aus einer Präsentation von Jeremy Clarke zum gleichen Thema.
Eine Einführung in objektorientiertes CSS (OOCSS)
Wie ich bereits erwähnt habe, sind die der DRY CSS-Bewegung innewohnenden Ideen ziemlich weitreichend und stehen in direktem Zusammenhang mit Konzepten in anderen Konstrukten. OOCS ist eine immer beliebter werdende Methode, mit der Sie schnellere und effizientere Stylesheets mit überlegener Organisation und weniger Wiederholungen erstellen können. In OOCS gibt es zwei Hauptprinzipien: Trennung der Struktur von der Haut und Trennung von Behältern und Inhalten. Dieser Artikel aus dem Smashing Magazine führt Sie durch die Grundideen und hilft Ihnen, sie auf Ihre eigene Arbeit anzuwenden.
Eine Einführung in SMACSS-Richtlinien zum Schreiben von CSS
Erinnerst du dich an Steven Bradley aus dem ersten Artikel über DRY CSS? Er schrieb auch dieses Stück, das ein Projekt erklärt, das OOCS ähnelt, aber von diesem getrennt ist: 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 Inhalt zu erhöhen, und die zweite darin, die Erwartung einer bestimmten HTML-Struktur zu verringern. Dieser Artikel erläutert beide Ziele im Detail und enthält hilfreiche Codebeispiele, damit Sie SMACSS in Aktion sehen können.
5. Kennen Sie Ihre Browser-Unterstützung
Der fünfte und letzte Schlüssel zur Verbesserung Ihres CSS ist 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 eine ganze Reihe davon in bestimmten Browsern nicht funktioniert (mit „bestimmten Browsern“ meine ich natürlich IE).
Das große Geheimnis, das Web-Neulinge in den Kopf bekommen müssen, ist nicht, dass sie sich jede einzelne CSS-Funktion merken müssen und wie jeder dem Menschen bekannte Browser damit umgeht, sondern dass Ihnen absolut erstaunliche Ressourcen zur Verfügung stehen, die Ihnen diese Informationen geben frei muss man nur wissen, wo man suchen muss.
Ressourcen, um Sie dorthin zu bringen
Nagel-Browser-Unterstützung in CSS3 und HTML5: Wertvolle Ressourcen für heute
In diesem Artikel stelle ich Ihnen die relativ wenigen Websites vor, die ich zur Überprüfung der Browserunterstützung mit einem Lesezeichen versehen habe. Diese Ressourcen sind fantastisch, visuell und bieten Ihnen im Handumdrehen die Informationen, die Sie benötigen, damit Sie wieder mit dem Codieren beginnen können. Schauen Sie sich an, was sie sind!
Browserunterstützung für CSS3: Wie ist der aktuelle Status?
Dieser Artikel wurde vor über einem Jahr geschrieben, daher ist der Artikel „Aktueller Status“ fraglich, aber in dieser Zeit hat sich nicht genug geändert, um die Informationen in diesem Artikel überflüssig zu machen. Es bietet eine unglaublich hilfreiche Übersicht ü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, bis Sie fertig sind, und es lohnt sich zu lesen.
Die Bedeutung der Cross-Browser-Kompatibilität: Tipps und Ressourcen
Wenn Sie CSS noch nicht kennen und eine grundlegende Einführung in das Thema Browserkompatibilität benötigen und wissen möchten, warum dies wichtig ist, finden Sie in diesem Noupe-Artikel Informationen. Es verkauft Ihnen nicht nur die Idee der Kompatibilität, sondern listet auch eine Reihe großartiger Ressourcen auf, mit denen Sie maximale Kompatibilität sicherstellen können. Von besonderem Interesse ist die Liste der Tools, mit denen 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 schön und gut, aber in meinem Titel habe ich versprochen, dass Sie an einem einzigen Tag besser werden und nicht jeder die Zeit hat, sich zu setzen und fünfzehn lange Artikel zu lesen!
Die gute Nachricht ist, dass ich Ihnen drei Artikel zu jedem Thema gegeben habe, damit Sie eine gewisse Auswahl haben. Ich habe den Inhalt jedes einzelnen ausführlich erklärt, damit Sie den auswählen können, der Ihren Anforderungen am besten entspricht. Denken Sie daran, die Artikel zum Lesen nicht basierend auf dem, was Sie wissen, sondern auf dem, was Sie nicht wissen, auszuwählen. Machen Sie es sich zum Ziel, die Wissenslücken zu schließen.
Mein Vorschlag ist, den obigen Inhalt zu durchsuchen und fünf Artikel zum Lesen auszuwählen (einen aus jedem Abschnitt). Selbst das ist viel zu tun an einem Tag, aber die meisten von ihnen sind nicht zu viel mehr als tausend Wörter oder so, viele sind weniger. Ich bin zuversichtlich, dass Sie es schaffen können. Wenn Sie nicht können, kein Problem. Ändern Sie Ihr Ziel, um Ihre CSS-Kenntnisse in einer Woche zu verbessern, und lesen Sie in den nächsten fünf Tagen jeden Tag einen Ihrer fünf ausgewählten Artikel. Ich garantiere Ihnen, dass Sie nächste Woche viel besser in der Lage sein werden, klares, präzises, kompatibles und wiederverwendbares CSS zu schreiben.
Welche anderen Konzepte empfehlen Sie?
Nachdem Sie meine fünf wichtigsten Themen gelesen haben, die die Leute auffrischen sollten, um ihre CSS-Kenntnisse zu verbessern, möchte ich von Ihnen hören. Mit welchen anderen Themen haben CSS-Programmierer Ihrer Meinung nach normalerweise zu kämpfen, und welche Ressourcen empfehlen Sie jedem, der mehr erfahren möchte?
Fotos mit freundlicher Genehmigung von BigStock
