Code Challenge # 2: 4 Conseils pour les scores plus élevés dans cssbattle.dev

cssbattle.dev: excellent défi pour améliorer les compétences CSS

Points de base

• Le défi de CSSBattle.dev est un excellent moyen d'améliorer les compétences CSS; Éléments.
• Pour enregistrer les caractères dans CSSBattle, sélectionnez soigneusement l'unité de mesure, profitez de "l'héritage" et de la "spécificité" du CSS, en vous rappelant que les navigateurs modernes sont amicaux à un code court et légèrement irrégulier.
• Le but de participer à CSSBattle.dev n'est pas d'encourager les mauvaises habitudes de codage, mais de tester, d'expérimenter et finalement de comprendre CSS plus profondément que d'écrire un code de production normal et robuste.

Vous nous avez peut-être vu lancer un deuxième défi de code il y a plus d'une semaine - en travaillant avec nos amis sur cssbattle.dev. Les batailles CSS sont un concept relativement nouveau - le site Web lancé en avril - et son fonctionnement n'est pas toujours évident.

Panneau de sortie et d'éditeur par défaut dans CSSBattle.

Autrement dit:

• Votre objectif est de créer une copie de l'image "cible" en utilisant uniquement HTML et CSS.
• Vous ne pouvez pas utiliser des images externes.
• Vous ne pouvez pas utiliser SVG (même en ligne SVG) ou des caractères spéciaux.
• Toutes les solutions sont automatiquement notées en fonction de la précision et de l'efficacité (nombre de caractères).
• Le joueur qui reproduit l'image cible avec le score le plus élevé gagne.

Je dois admettre que lorsque j'ai vu cette idée pour la première fois, j'étais un peu incroyable. Qui peut créer ces conceptions avec HTML et CSS qui sont inférieures à la «longueur de tweet»? C'est certainement impossible, non?

donc je l'ai essayé et la plupart qui ont échoué mais j'ai également gagné quelque chose et j'ai progressivement commencé à comprendre certaines des techniques nécessaires. Si vous êtes curieux, je pense que je présenterai 4 conseils pour vous aider à obtenir des scores plus élevés.

Permettez-moi d'être clair: quand j'ai écrit ceci, j'étais classé 24e dans ce tour de bataille. J'ai atteint tous mes objectifs jusqu'à présent et je me suis classé 26e au total, donc il y a certainement au moins vingt ou trente joueurs avec une bien meilleure solution que moi. Cependant, j'aimerais partager mes connaissances - et accepter les conseils de toute personne ayant de meilleures idées.

Astuce n ° 1: le panneau de sortie vide n'est jamais un véritable

La première fois que vous chargez n'importe quelle cible, vous verrez quelque chose de similaire à l'image ci-dessus. Votre éditeur est toujours pré-rempli avec un échantillon HTML et CSS, offrant une position de départ de base. Cependant, même si vous supprimez chaque caractère de l'éditeur, votre panneau de sortie n'est techniquement pas vide.

Pourquoi? Si vous vérifiez le code source du panneau de sortie (Conseil: désormais d'abord désactiver la fonction "diapositives et comparer"), vous trouverez un

Comme indiqué dans l'image ci-dessous, vous pouvez voir qu'ils existent dans une rangée de CSS. Bien sûr, vous pouvez styliser ces deux éléments HTML à volonté sans dépenser de personnages pour les créer.

Il y a toujours un HTML et un élément corporel à style.

Cela ne signifie pas que vous n'ajoutez jamais vos propres éléments HTML -

, , , etc. - Essayez toujours de prioriser les "éléments intégrés" gratuits.

Technique # 2: Sélectionnez soigneusement l'unité de mesure

Les cibles CSSBattle sont toujours de 400 pixes de large et 300px de haut, vous pouvez donc décrire correctement le point central comme à gauche: 200px (10 caractères) et en haut: 150px (9 caractères). Cependant, vous pouvez décrire cette position exacte comme à gauche: 50% (8 caractères) et en haut: 50% (7 caractères). Il s'agit d'une économie pratique de 4 caractères.

Cependant, le pourcentage ne gagne pas toujours. Position top: 100px (9 caractères) se convertit en haut: 33,33% (10 caractères) - un pas en arrière. Trouver le meilleur match demande beaucoup d'essais et d'erreurs. Les unités de mesure potentiellement utiles comprennent:

pixels: px

• pourcentage:%
• REMS: Rem
• EMS: em
• pouces: dans
• mm: mm
• livre: pc
• point: pt
• Unité de hauteur de la fenêtre: VH
• Unité de largeur de la fenêtre: VW
• Millimètre quart: q
Le dernier type d'unité - «Q» - est une unité relativement peu connue. Mais parce que c'est un personnage - je trouve cela très utile dans les batailles CSS. J'ai trouvé que 50px convertit en 53 q.

Notez également que si vous ne déclarez pas explicitement le type d'unité, certaines propriétés CSS supposent que vous faites référence à un pixel. En d'autres termes, la largeur: 80 est la même que la largeur: 80px. Il en va de même pour la hauteur et les marges. D'un autre côté, si vous ne déclarez pas l'unité de mesure, Box-Shadow échouera complètement.

Astuce n ° 3: CSS est en cascade - profitez-en

CSS est très bon en "héritage" et "spécificité". L'héritage permet aux enfants d'obtenir leurs styles de leurs éléments parents. "Spécifique" signifie que les règles générales seront couvertes par des règles plus prudentes ou récemment déclarées.

La règle la plus large de CSS est le * Wildcard, qui signifie "appliqué à tous les éléments". Par conséquent, les règles suivantes appliquent l'arrière-plan # 222 à tous les contenus. Si nous n'ajoutons aucun HTML supplémentaire, c'est

et

.

Si nous ajoutons ensuite une règle plus spécifique pour localiser uniquement

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

, nous stylissons simplement le

sans le nommer directement - enregistrer 3 caractères.

allons plus loin.

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

Dans CSS, l'opérateur "& gt;" signifie "uniquement si x est le parent de Y" (c'est-à-dire x & gt; y {}). Donc, si nous écrivons:

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

… Nous parlons de "n'appliquant que cette règle à tout élément qui se trouve dans tout autre élément" - en d'autres termes, tout élément enfant. Étant donné que l'élément n'est jamais un élément enfant, seul

obtient la deuxième règle. Nous avons sauvé un autre personnage.

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

Astuce n ° 4: Le navigateur est puissant. Laissez-les fonctionner

Une fois que vous avez obtenu tous les résultats à portée de main, la seule façon pratique de couper les caractères est de supprimer le code qui est techniquement nécessaire mais absolument pas important pour le rendu final. Vous pourriez dire que les navigateurs modernes seront amicaux avec un code court et légèrement irrégulier. Cela comprend mais sans s'y limiter:

fin de suppression

• Fin de la balise HTML de la suppression (c'est-à-dire
)
• La fin finale de la suppression du bloc de style}
• Retirez la plupart des espaces et des caractères de retour des chariots. Les essais et erreurs voici votre ami.

Bien sûr, il n'a pas de sens d'adopter une optimisation aussi extrême dans la production CSS. Vous comprometterez la fiabilité de votre code pour les économies triviales. Mais CSSBattles vous apprendra davantage sur la façon dont les navigateurs pensent et ce qu'ils aiment et n'aiment pas.

Alors, CSSBattle encourage-t-il les mauvaises habitudes de codage?

J'ai entendu dire que c'est un inconvénient potentiel. En fait, le vétéran du CSS, Eric Meyer, a récemment soulevé cette question dans CSSBattle.dev Spectrum Feedback:

La dépendance à l'utilisation des défauts d'analyse (en particulier sur la séparation des espaces) est-il pour obtenir des scores inférieurs intentionnels, ou est-ce un effet secondaire? –Eric meyer

Je ne pense pas. Pour moi, c'est un moyen de tester, d'expérimenter et finalement de mieux comprendre le CSS que d'écrire un code de production normal et robuste.

Vous pouvez le comparer à la poésie japonaise du haïku. Haiku est un format construit sur des restrictions strictes - toute restriction de 3 lignes et 17 syllabes.

Même le plus grand maître haïku au monde ne s'attend pas à parler ou à écrire avec Haiku soigneusement construit chaque jour. Cependant, cela ne signifie pas que lorsque nous lisons (ou écrivons) du haïku, nous ne pouvons pas apprendre des leçons importantes de la sélection des mots, du rythme, de l'équilibre et de la beauté.

L'écriture "CSS Battles Code" n'est pas la même chose que l'écriture de "code de production" - mais elle vous apprendra des cours que vous ne pouvez pas apprendre nulle part ailleurs. FAQ sur CSSBattle Dev (FAQ)

Qu'est-ce que CSSBattle Dev et comment cela fonctionne-t-il?

CSSBattle Dev est une plate-forme en ligne où les développeurs peuvent rivaliser les uns avec les autres pour les défis de codage CSS. La plate-forme fournit une image cible et votre tâche consiste à le copier à l'aide de HTML et CSS. Plus votre sortie est proche de l'image cible, plus votre score sera élevé. La plate-forme utilise un système de notation unique qui prend en compte la précision de la sortie et la longueur du code. Plus le code est court, plus il est précis, plus le score est élevé.

Comment améliorer mon score dans CSSBattle Dev?

Améliorer votre score dans CSSBattle Dev nécessite une combinaison de précision et de simplicité. Votre sortie doit être aussi proche que possible de l'image cible et votre code doit être aussi court que possible. Vous pouvez le faire en maîtrisant les propriétés et les valeurs CSS, en comprenant comment les différentes propriétés CSS interagissent les unes avec les autres et l'apprentissage de l'écriture de code concis et efficace.

Quels sont les conseils pour maîtriser CSSBattle Dev?

La maîtrise de CSSBattle Dev nécessite une pratique et une compréhension approfondie du CSS. Voici quelques conseils:

1. Comprendre les modèles de boîtes: les modèles de boîtes CSS sont la pierre angulaire de la conception de la disposition. Il est crucial de comprendre comment fonctionnent le rembourrage, les frontières et les marges.
2. Positionnement maître: comprendre comment les différentes valeurs de positionnement (statiques, relatives, absolues, fixes) affectent la position des éléments peuvent vous aider à placer avec précision les éléments.
3. Apprenez à utiliser les propriétés abrégées: les propriétés abrégées vous permettent de spécifier plusieurs propriétés en une seule ligne, vous aidant à écrire du code plus court et plus propre.

Comment puis-je en savoir plus sur les propriétés et valeurs CSS?

Il existe de nombreuses ressources disponibles en ligne pour apprendre les propriétés et les valeurs du CSS. Des sites Web tels que MDN Web Docs, CSS-Tricks et W3Schools fournissent des guides et tutoriels complets sur CSS. De plus, pratiquer des plates-formes comme CSSBattle Dev peut vous aider à comprendre comment différentes propriétés et valeurs fonctionnent dans des scénarios réels.

Si je suis nouveau dans CSS, puis-je participer à CSSBattle Dev?

bien sûr! CSSBattle Dev est une excellente plate-forme pour les débutants pour apprendre et pratiquer le CSS. Les défis varient de simple à difficile, vous pouvez donc commencer par des défis simples et progresser progressivement vers des défis plus complexes à mesure que vos compétences s'améliorent.

Comment fonctionne le système de notation de CSSBattle Dev?

Le système de notation de CSSBattle Dev est basé sur deux facteurs: la précision et la longueur du code. La plate-forme compare votre sortie à l'image cible et calcule les scores en fonction de leur correspondance. Il prend également en compte la durée du code - plus le code est court, plus le score est élevé.

Puis-je voir les solutions d'autres participants dans CSSBattle Dev?

Oui, après avoir soumis votre propre solution, vous pouvez voir les solutions des autres participants. C'est un excellent moyen d'apprendre différentes façons de résoudre les mêmes défis et peut vous aider à améliorer vos compétences de codage.

Quelles sont les erreurs courantes qui devraient être évitées dans CSSBattle Dev?

Certaines erreurs courantes qui doivent être évitées dans CSSBattle Dev incluent: ne pas comprendre pleinement le modèle de boîte CSS, n'utilisant pas les propriétés abrégées, et ne pas optimiser le code pour le rendre concis. Il est également important de tester soigneusement votre code pour vous assurer qu'il peut copier l'image cible avec précision.

Puis-je utiliser CSSBattle Dev pour préparer un entretien d'embauche?

Oui, CSSBattle Dev est un outil utile pour préparer un entretien d'embauche. Cela peut vous aider à améliorer vos compétences de résolution de problèmes, à apprendre à écrire du code efficace et à mieux comprendre le CSS. Cependant, n'oubliez pas que les entretiens d'embauche peuvent également couvrir d'autres aspects du développement Web, donc ce ne devrait pas être votre seul outil de préparation.

Comment rester motivé lors de l'apprentissage du CSS via CSSBattle Dev?

L'apprentissage du CSS avec CSSBattle Dev peut être difficile, mais cela peut également être très intéressant. L'aspect compétitif de la plate-forme peut vous motiver à améliorer vos compétences. Vous pouvez également fixer des objectifs personnels, comme atteindre un certain score ou terminer un certain nombre de défis pour rester motivé. N'oubliez pas que la clé pour maîtriser le CSS (ou toute compétence) est la persistance de la pratique et de la patience.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!