Parsing-Aufgabe nach Layout (Sass, Mops, Schluck, Bem)

Ich kenne einen solchen Trick schon lange, habe ihn aber erst zum ersten Mal in der Praxis angewendet. Es gab eine Einschränkung im Layout (Wrapper = Breite: 1170px, roter Rand). Rechts entsprach der Inhalt der Einschränkung und grenzte an den Rand, links kroch das Bild aus dem Rand. Das kann zunächst beängstigend sein, aber es lohnt sich, mehr über die Funktionsweise von margin-letf: -100px zu erfahren, und Sie wissen bereits, wie Sie die Aufgabe lösen können. Das ist übrigens flexibel und in gelb habe ich die Grenzen der Objekte markiert.

Wir sind es gewohnt, Breite und Höhe als 100% zu verwenden, und dies ist klar, alles für adaptive, mit Breite können Sie ein ähnliches Ergebnis erzielen wie mit negativen Rändern. Geben Sie dem Nachkommen einfach die Größe, die größer als die Ihres Elternteils ist (z. B. Breite: 130%).

Das war wahrscheinlich das Schwierigste für mich.



Dieses Bild zeigt gut mein Projekt und in der Tat jedes Projekt. Wenn Sie die ersten hundert Zeilen schreiben, scheint alles einfach zu sein, und Sie bemerken keine Probleme. Sie beenden das Projekt mit einer Länge von 900 Zeilen und haben sich unerwartet entschieden, durch die Datei zu scrollen oder Medienabfragen hinzuzufügen.



Sie schreiben Stile für ein Element in Medien, sehen sich die Website an und verstehen nicht, warum die Stile nicht wie erforderlich funktionieren. Auf der Suche nach einem Problem, das Sie bereits 15 Minuten verbracht haben, haben Sie die Aufgaben in gulp überprüft und die kompilierte CSS-Datei durchgeblättert.

Zufällig, zufällig ... finden Sie das Problem in einem kaskadierenden Stylesheet oder vielmehr in der Art und Weise, wie Stile auf Elemente angewendet werden. Ganz am Anfang meiner Reise ins Internet habe ich sicherlich gelesen, dass Selektoren unterschiedliche Anwendungsprioritäten haben. Kurz gesagt, dann für einen gewöhnlichen (div, ul, a, p usw.) Selektor -1 Punkt für Klasse 10 für den Bezeichner 100.



Nachdem ich alle Verschachtelungen sorgfältig überprüft hatte, fand ich immer noch einen Fehler. Es stellt sich heraus, dass Sie die Verschachtelung von Elementen überwachen und dies nicht die letzte Bedeutung geben müssen.

Dies kann die Struktur der CSS-Datei (sass) umfassen. Es gibt einen "Portfolio" -Block, der eine Reihe von Elementen vom Typ "Portfolio __ *" enthält, aber meiner Meinung nach sind zwei Klassen in dieser Verschachtelung überflüssig.

Dies war das erste Projekt, bei dem ich versucht habe, mich strikt an BEM zu halten, aber am Anfang keine Minute mit dem Entwerfen verbracht habe, sondern Kurse für unterwegs entwickelt habe, was dazu führte, dass die Unterstützung schwierig ist.



Aber dies ist meiner Meinung nach ein gutes Beispiel für BEM

Ich habe über dieses Problem in einem der Artikel über BEM gelesen, aber ich selbst bin zuerst darauf gestoßen. Es ist sehr ähnlich zu Problemen mit Bootstrap, es hatte auch ... es gibt lange Klassen. Wie komme ich mit der Mindestanzahl von Klassen aus?

Dies ist die Standard-BTN.



Und das sind schon modifizierte Buttons ...

Angesichts der Tatsache, dass ich über BEM schreiben musste, kamen von hier aus einige Komplikationen im Projekt. Ich habe bereits über lange Klassen geschrieben, hier ist ein anderer Fall.

Es gab 6 ähnliche Elemente auf der Seite. Bei Medienabfragen musste eine bestimmte Anzahl von Elementen ausgeblendet werden. Erstellen Sie schließlich nicht für jedes Objekt neue Klassen. Ich musste die Pseudoklasse nth-child () verwenden. Früher wurde es nur beschnitten verwendet (Kind (1), Kind (3), Kind (4) usw.), jetzt mussten alle Elemente außer den ersten beiden ausgeblendet werden. Nachdem ich 5 Minuten lang die Dokumentation gelesen hatte, verwendete ich das n-te Kind (n + 3), um das gewünschte Ergebnis zu erzielen.



Ein weiteres Beispiel dafür, wie Sie das gewünschte Element durch eine Gruppe von Selektoren führen und keine spezielle Klasse für dieses Element erstellen können.



Siehe das Bild unten. Der nächste Eintrag div.1> p wählt nur Objekte mit der Klasse „2“ aus, div.3> p empfängt dementsprechend Objekte mit der Klasse „4“. Das Bild zeigt, wie das funktioniert. Die nächstgelegenen Elemente werden in der Hierarchie ausgewählt.