Code Challenge Nr. 2: 4 Tipps für höhere Ergebnisse in CSSBattle.dev

cssbattle.dev: Hervorragende Herausforderung zur Verbesserung der CSS -Fähigkeiten

Kernpunkte

• Die Herausforderung von CSSBattle.dev ist eine hervorragende Möglichkeit, die CSS -Fähigkeiten zu verbessern. Elemente.
• Um Zeichen in CSSBattle zu sparen, wählen Sie sorgfältig die Messeinheit aus, nutzen Sie die "Erbschaft" und "Spezifität" von CSS und erinnern sich daran, dass moderne Browser mit kurzem und leicht unregelmäßigem Code freundlich und leicht unregelmäßig sind.
• Der Zweck der Teilnahme an CSSBattle.

Sie haben uns vielleicht vor einer Woche eine zweite Code -Herausforderung gestartet - mit unseren Freunden bei CSSBattle.dev zusammenzuarbeiten. CSS -Schlachten sind ein relativ neues Konzept - die im April gestartete Website - und wie es funktioniert, ist nicht immer offensichtlich.

Standardausgabe- und Editor -Panel in CSSBattle.

Einfach gesagt:

• Ihr Ziel ist es, eine Kopie des "Ziel" -Fildes mit nur HTML und CSS zu erstellen.
• Sie können keine externen Bilder verwenden.
• Sie können SVG (auch inline SVG) oder Sonderzeichen nicht verwenden.
• Alle Lösungen werden automatisch auf der Grundlage von Genauigkeit und Effizienz (Anzahl der Zeichen) bewertet.
• Der Spieler, der das Zielbild mit der höchsten Punktzahl reproduziert.

Ich muss zugeben, dass ich, als ich diese Idee zum ersten Mal sah, ein bisschen unglaublich war. Wer kann diese Designs mit HTML und CSS erstellen, die weniger als die „Tweet -Länge“ sind? Das ist definitiv unmöglich, oder?

Also habe ich es versucht und das meiste davon fehlgeschlagen, aber ich habe auch etwas gewonnen und allmählich einige der erforderlichen Techniken verstanden. Wenn Sie neugierig sind, denke ich, dass ich 4 Tipps einführen werde, um höhere Punktzahlen zu erzielen.

Lassen Sie mich klar sein: Als ich das schrieb, wurde ich in dieser Schlachtrunde den 24. Platz. Ich habe alle meine bisherigen Ziele erreicht und habe insgesamt den 26. Platz belegt, sodass es definitiv mindestens zwanzig oder dreißig Spieler mit einer viel besseren Lösung als ich gibt. Ich würde jedoch gerne mein Wissen teilen und Ratschläge von jedem mit besseren Ideen annehmen.

Tipp Nr. 1: Leeres Ausgangsfeld ist nie ein echtes leeres

Wenn Sie zum ersten Mal ein Ziel laden, sehen Sie etwas Ähnliches wie das obige Bild. Ihr Editor ist immer mit Beispiel-HTML und CSS vorgefüllt und bietet eine grundlegende Ausgangsposition. Selbst wenn Sie jeden Charakter im Editor löschen, ist Ihr Ausgabebereich technisch nicht leer.

Warum? Wenn Sie den Quellcode des Ausgabestafels überprüfen (Tipp: Schalten Sie nun zuerst die Funktion "Folie und Vergleichen" aus), finden Sie ein

Wie im Bild unten gezeigt, können Sie sehen, dass sie in einer Reihe von CSS existieren. Natürlich können Sie diese beiden HTML -Elemente nach Belieben stylen, ohne Charaktere auszugeben, um sie zu erstellen.

Es gibt immer ein HTML und ein Körperelement zu stylen.

Dies bedeutet nicht, dass Sie niemals Ihre eigenen HTML-Elemente hinzufügen werden-

, , usw.-aber versuchen Sie immer, die kostenlosen "eingebauten Elemente" zu priorisieren.

Technik Nr. 2: Wählen Sie sorgfältig die Messeinheit

CSSBattle -Ziele sind immer 400px breit und 300px hoch, sodass Sie den Mittelpunkt korrekt wie links beschreiben können: 200px (10 Zeichen) und oben: 150px (9 Zeichen). Sie können diese genaue Position jedoch als links beschreiben: 50% (8 Zeichen) und oben: 50% (7 Zeichen). Dies ist eine bequeme Einsparung von 4-Charakter.

Der Prozentsatz gewinnt jedoch nicht immer. Position oben: 100px (9 Zeichen) konvertiert nach oben: 33,33% (10 Zeichen) - einen Schritt zurück. Das Beste für die beste Übereinstimmung erfordert viel Versuch und Irrtum. Potenziell nützliche Messeinheiten umfassen:

Pixel: px

• Prozentsatz: %
• REMS: REM
• ems: em
• Zoll: in
• mm: mm
• Pfund: PC
• Punkt: pt
• Ansichtsfenstereinheit: VH
• Ansichtsfenster -Einheit: VW
• Quart Millimeter: q
Der letzte Einheitstyp-"Q"-ist eine relativ wenig bekannte Einheit. Aber weil es ein Charakter ist - ich finde es in CSS -Schlachten sehr nützlich. Ich fand, dass 50px in 53 q konvertiert.

Beachten Sie auch, dass einige CSS -Eigenschaften, wenn Sie den Einheitstyp nicht explizit deklarieren, annehmen, dass Sie sich auf ein Pixel beziehen. Mit anderen Worten, Breite: 80 entspricht der Breite: 80px. Gleiches gilt für Größe und Ränder. Wenn Sie dagegen die Maßeinheit nicht deklarieren, scheitert Box-Shadow vollständig.

Tipp Nr. 3: CSS ist kaskadiert - machen Sie das Beste daraus

CSS ist sehr gut in "Erbschaft" und "Spezifität". Erbschaft ermöglicht es Kindern, ihre Stile von ihren Elternelementen zu erhalten. "Spezifisch" bedeutet, dass breite Regeln durch sorgfältigere oder kürzlich deklarierte Regeln erfasst werden.

Die breiteste Regel in CSS ist die * Wildcard, was "auf alle Elemente angewendet" bedeutet. Daher wenden die folgenden Regeln den Hintergrund #222 auf alle Inhalte an. Wenn wir kein zusätzliches HTML hinzufügen, ist das

und

.

Wenn wir dann eine spezifischere Regel hinzufügen, um nur

<code>*{background:#222}</code>

zu lokalisieren, stylen wir nur die

, ohne es direkt zu benennen - 3 Zeichen zu speichern.

Lassen Sie uns noch einen Schritt weiter gehen.

<code>*{background:#222}
body{background:#F2994A}</code>

In CSS bedeutet der "& gt;" nur dann, wenn x der Elternteil von Y ist (d. H. X & gt; y {}). Also, wenn wir schreiben:

<code>*{background:#222}</code>

… wir sprechen von "Wenden Sie diese Regel nur auf ein Element an, das in einem anderen Element liegt" - mit anderen Worten, jedes untergeordnete Element. Da das Element niemals ein untergeordnetes Element ist, erhält nur

die zweite Regel. Wir haben einen anderen Charakter gerettet.

<code>*{background:#222}
body{background:#F2994A}</code>

Tipp Nr. 4: Der Browser ist leistungsfähig. Lassen Sie sie

arbeiten

Sobald Sie alle Ergebnisse zu Ihren Fingerspitzen erhalten haben, besteht die einzige praktische Möglichkeit, Zeichen zu schneiden, darin, Code zu entfernen, der für das endgültige Rendering technisch notwendig, aber absolut nicht wichtig ist. Man könnte sagen, dass moderne Browser freundlich bis kurzen und leicht unregelmäßigen Code sein werden. Dies beinhaltet, aber nicht beschränkt auf:

Ende der Deletion

• Ende der Deletion HTML -Tag (d. H.
)
• Das endgültige Ende des Löschens des Stilblocks}
• Entfernen Sie die meisten Leerzeichen und die Kutschenrückgabezeichen. Versuch und Irrtum hier sind Ihr Freund.

Natürlich ist es bedeutungslos, eine solche extreme Optimierung in der Produktions -CSS zu übernehmen. Sie werden die Zuverlässigkeit Ihres Codes für triviale Einsparungen beeinträchtigen. Aber CSSBattles wird Ihnen mehr darüber lehren, wie Browser denken und was sie mögen und nicht mögen.

Fördert CSSBattle schlechte Codierungsgewohnheiten?

Ich habe einige Erwähnung erwähnt, dass dies ein potenzieller Nachteil ist. Tatsächlich hat der CSS -Veteran Eric Meyer diese Frage kürzlich in CSSBattle.DEV Spectrum Feedback:

aufgeworfen:

Ist die Abhängigkeit von der Verwendung von Parser -Fehler (insbesondere zur Trennung von Räumen), um niedrigere Bewertungen absichtlich zu erzielen, oder ist es ein Nebeneffekt? –Ic Meyer

Ich glaube nicht. Für mich ist es eine Möglichkeit, CSS zu testen, zu experimentieren und schließlich ein tieferes Verständnis zu erhalten, als den normalen, robusten Produktionscode zu schreiben.

Sie können es mit japanischen Haiku -Poesie vergleichen. Haiku ist ein Format, das auf strengen Einschränkungen basiert - jede Beschränkung von 3 Linien und 17 Silben.

Selbst der größte Haiku -Meister der Welt erwartet nicht, jeden Tag mit sorgfältig konstruierter Haiku zu sprechen oder zu schreiben. Dies bedeutet jedoch nicht, dass wir beim Lesen (oder schreiben) Haiku keine wichtigen Lektionen aus Wortauswahl, Rhythmus, Gleichgewicht und Schönheit lernen können.

Das Schreiben von "CSS Battles Code" entspricht nicht dem Schreiben von "Produktionscode" - aber es wird Ihnen Kurse beibringen, die Sie nirgendwo anders lernen können.

FAQs über CSSBattle Dev (FAQ)

Was ist CSSBattle Dev und wie funktioniert es?

cssbattle dev ist eine Online -Plattform, auf der Entwickler miteinander um CSS -Codierungsherausforderungen konkurrieren können. Die Plattform bietet ein Zielbild und Ihre Aufgabe ist es, es mit HTML und CSS zu kopieren. Je näher Ihre Ausgabe dem Zielbild ist, desto höher ist Ihre Punktzahl. Die Plattform verwendet ein eindeutiges Bewertungssystem, das die Genauigkeit der Ausgabe und die Länge des Codes berücksichtigt. Je kürzer der Code ist, desto genauer ist er, desto höher ist die Punktzahl.

Wie kann ich meine Punktzahl in CSSBattle Dev verbessern?

Verbesserung Ihrer Punktzahl in CSSBattle Dev erfordert eine Kombination aus Genauigkeit und Einfachheit. Ihre Ausgabe muss so nah wie möglich am Zielbild liegen, und Ihr Code muss so kurz wie möglich sein. Sie können dies tun, indem Sie CSS -Eigenschaften und -Werte beherrschen, verstehen, wie unterschiedliche CSS -Eigenschaften miteinander interagieren und lernen, wie man prägnanten und effizienten Code schreibt.

Was sind einige Tipps zum Beherrschen von CSSBattle Dev?

Mastering CSSBattle Dev erfordert Übung und eingehendes Verständnis von CSS. Hier sind einige Tipps:

1. Box -Modelle verstehen: CSS -Box -Modelle sind der Eckpfeiler des Layoutdesigns. Es ist entscheidend zu verstehen, wie Polsterung, Grenzen und Ränder funktionieren.
2. Masterpositionierung: Verständnis, wie unterschiedliche Positionierungswerte (statisch, relativ, absolut, fest) die Position von Elementen beeinflussen können, können Ihnen dabei helfen, Elemente genau zu platzieren.
3. Lernen Sie, abgekürzte Eigenschaften zu verwenden: Abkürzte Eigenschaften ermöglichen es Ihnen, mehrere Eigenschaften in einer einzelnen Zeile anzugeben und Ihnen dabei zu helfen, einen kürzeren, saubereren Code zu schreiben.

Wie lerne ich mehr über CSS -Eigenschaften und -Werte?

Es sind viele Ressourcen online verfügbar, um CSS -Eigenschaften und -Werte zu erlernen. Websites wie MDN Web Docs, CSS-Tricks und W3schools bieten umfassende Leitfäden und Tutorials auf CSS. Das Üben auf Plattformen wie CSSBattle Dev kann außerdem helfen, zu verstehen, wie unterschiedliche Eigenschaften und Werte in realen Szenarien funktionieren.

Wenn ich bei CSS neu bin, kann ich dann an CSSBattle Dev teilnehmen?

natürlich! CSSBattle Dev ist eine hervorragende Plattform für Anfänger, um CSS zu lernen und zu üben. Die Herausforderungen variieren von einfach zu schwierig, sodass Sie mit einfachen Herausforderungen beginnen und sich nach und nach zu komplexeren Herausforderungen bewegen können, wenn sich Ihre Fähigkeiten verbessern.

Wie funktioniert das Bewertungssystem von CSSBattle Dev?

Das Bewertungssystem von CSSBattle Dev basiert auf zwei Faktoren: Genauigkeit und Codelänge. Die Plattform vergleicht Ihre Ausgabe mit dem Zielbild und berechnet die Bewertungen basierend auf der Übereinstimmung mit der Übereinstimmung. Es berücksichtigt auch die Länge des Codes - je kürzer der Code ist, desto höher ist die Punktzahl.

Kann ich die Lösungen anderer Teilnehmer in CSSBattle Dev sehen?

Ja, nachdem Sie Ihre eigene Lösung eingereicht haben, können Sie die Lösungen von anderen Teilnehmern anzeigen. Dies ist eine großartige Möglichkeit, verschiedene Möglichkeiten zu lernen, um dieselben Herausforderungen zu lösen, und können Sie dabei helfen, Ihre Codierungsfähigkeiten zu verbessern.

Was sind einige häufige Fehler, die in CSSBattle Dev vermieden werden sollten?

Einige häufige Fehler, die in CSSBattle Dev vermieden werden sollten, umfassen: Nicht vollständig das CSS -Box -Modell zu verstehen, keine abgekürzten Eigenschaften zu verwenden und den Code nicht zu optimieren, um ihn präzise zu machen. Es ist auch wichtig, Ihren Code gründlich zu testen, um sicherzustellen, dass das Zielbild genau kopiert wird.

Kann ich CSSBattle Dev verwenden, um sich auf ein Vorstellungsgespräch vorzubereiten?

Ja, CSSBattle Dev ist ein nützliches Instrument zur Vorbereitung auf ein Vorstellungsgespräch. Es kann Ihnen helfen, Ihre Fähigkeiten zur Problemlösung zu verbessern, effizientes Code zu schreiben und ein tieferes Verständnis von CSS zu erlangen. Denken Sie jedoch daran, dass Vorstellungsgespräche auch andere Aspekte der Webentwicklung abdecken können, sodass es nicht Ihr einziges Vorbereitungswerkzeug sein sollte.

Wie bleibe ich motiviert, während ich CSS über CSSBattle Dev lerne?

CSS mit CSSBattle Dev lernen kann eine Herausforderung sein, kann aber auch sehr interessant sein. Der wettbewerbsfähige Aspekt der Plattform kann Sie motivieren, Ihre Fähigkeiten zu verbessern. Sie können auch persönliche Ziele festlegen, z. B. das Erreichen einer bestimmten Punktzahl oder eine bestimmte Anzahl von Herausforderungen, um motiviert zu bleiben. Denken Sie daran, der Schlüssel zum Beherrschen von CSS (oder jeglicher Fähigkeiten) ist die Ausdauer in der Praxis und Geduld.

Das obige ist der detaillierte Inhalt vonCode Challenge Nr. 2: 4 Tipps für höhere Ergebnisse in CSSBattle.dev. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!