Code Challenge #2: 4 Tips for Higher Scores in CSSBattle.dev

CSSBattle.dev: Excellent challenge to improve CSS skills

Core points

• The challenge of CSSBattle.dev is an excellent way to improve CSS skills; prioritize the use of free "built-in elements", remembering that the empty output panel is not really empty, it contains two invisible elements - HTML and BODY elements .
• To save characters in CSSBattle, carefully select the unit of measurement, take advantage of the "inheritance" and "specificity" of CSS, remembering that modern browsers are friendly to short and slightly irregular code.
• The purpose of participating in CSSBattle.dev is not to encourage bad coding habits, but to test, experiment and eventually understand CSS more deeply than writing normal, robust production code.

You may have seen us launch a second code challenge over a week ago – working with our friends at CSSBattle.dev. CSS battles are a relatively new concept – the website launched in April – and how it works isn’t always obvious.

Default output and editor panel in CSSbattle.

Simply put:

• Your goal is to create a copy of the "target" image using only HTML and CSS.
• You cannot use external images.
• You cannot use SVG (even inline SVG) or special characters.
• All solutions are automatically scored based on accuracy and efficiency (number of characters).
• The player who reproduces the target image with the highest score wins.

I must admit that when I first saw this idea, I was a little incredible. Who can create those designs with HTML and CSS that are less than the “tweet length”? This is definitely impossible, right?

So I tried it and most of it failed-but I also gained something and gradually began to understand some of the techniques needed. If you are curious, I think I will introduce 4 tips to help you get higher scores.

Let me be clear: When I wrote this, I was ranked 24th in this battle round. I've accomplished all my goals so far and ranked 26th overall, so there are definitely at least twenty or thirty players with a much better solution than I do. However, I would love to share my knowledge – and accept advice from anyone with better ideas.

Tip #1: Empty output panel is never a real empty

The first time you load any target, you will see something similar to the image above. Your editor is always pre-filled with sample HTML and CSS, providing a basic starting position. However, even if you delete every character in the editor, your output panel is technically not empty.

Why? If you check the source code of the output panel (tip: now turn off the "Slide and Compare" function first), you will find an

As shown in the image below, you can see that they exist in a row of CSS. Of course, you can style these two HTML elements at will without spending any characters to create them.

There is always an HTML and a BODY element to style.

This doesn't mean you will never add your own HTML elements—

, , , etc.—but always try to prioritize the free "built-in elements".

Technique #2: Carefully select the unit of measurement

CSSBattle targets are always 400px wide and 300px high, so you can correctly describe the center point as left:200px (10 characters) and top:150px (9 characters). However, you can describe that exact position as left:50% (8 characters) and top:50% (7 characters). This is a convenient 4-character savings.

However, the percentage does not always win. Position top:100px (9 characters) converts to top:33.33% (10 characters) – one step back. Finding the best match takes a lot of trial and error. Potentially useful units of measurement include:

Pixels: px

• Percentage: %
• Rems: rem
• Ems:em
• Inches: in
• mm:mm
• Pound:pc
• Point: pt
• Viewport height unit: vh
• Viewport width unit: vw
• Quart Millimeter:q
The last unit type—“q”—is a relatively little-known unit. But because it's a character - I find it very useful in CSS battles. I found that 50px converts to 53 q.

Also note that if you do not explicitly declare the unit type, some CSS properties assume that you are referring to a pixel. In other words, width:80 is the same as width:80px. The same is true for height and margins. On the other hand, if you don't declare the unit of measure, box-shadow will fail completely.

Tip #3: CSS is cascading – make the most of it

CSS is very good at "inheritance" and "specificity". Inheritance allows children to get their styles from their parent elements. "Specific" means that broad rules will be covered by more careful or recently declared rules.

The broadest rule in CSS is the * wildcard, which means "applied to all elements". Therefore, the following rules apply the #222 background to all content. If we don't add any extra HTML, that's

and

.

If we then add a more specific rule to locate only

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

, we just style the

without naming it directly - saving 3 characters.

Let's go a step further.

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

In CSS, the ">" operator means "only if X is the parent of Y" (i.e. x>y{}). So if we write:

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

…We are talking about "only apply this rule to any element that lies within any other element" - in other words, any child element. Since the element is never a child element, only

gets the second rule. We saved another character.

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

Tip #4: The browser is powerful. Let them work

Once you get all the results at your fingertips, the only practical way to cut characters is to remove code that is technically necessary but absolutely not important for the final rendering. You might say that modern browsers will be friendly to short and slightly irregular code. This includes but is not limited to:

End of Deletion

• End of Deletion HTML tag (i.e.
)
• The final end of deleting the style block }
• Remove most spaces and carriage return characters. Trial and error here is your friend.

Of course, it is meaningless to adopt such extreme optimization in production CSS. You will compromise the reliability of your code for trivial savings. But CSSBattles will teach you more about how browsers think and what they like and don’t like.

So, does CSSBattle encourage bad coding habits?

I heard some mention that this is a potential drawback. In fact, CSS veteran Eric Meyer recently raised this question in CSSBattle.dev Spectrum feedback:

Is the dependence on utilizing parser flaws (especially about separating spaces) to get lower scores intentional, or is it a side effect? –Eric Meyer

I don't think so. For me, it's a way to test, experiment and eventually get a deeper understanding of CSS than writing normal, robust production code.

You can compare it to Japanese haiku poetry. Haiku is a format built on strict restrictions—any restriction of 3 lines and 17 syllables.

Even the greatest haiku master in the world does not expect to speak or write with carefully constructed haiku every day. However, this does not mean that when we read (or write) haiku, we cannot learn important lessons from word selection, rhythm, balance and beauty.

Writing "CSS Battles Code" is not the same as writing "production code" - but it will teach you courses you can't learn anywhere else.

FAQs about CSSBattle Dev (FAQ)

What is CSSBattle Dev and how does it work?

CSSBattle Dev is an online platform where developers can compete with each other for CSS coding challenges. The platform provides a target image, and your task is to copy it using HTML and CSS. The closer your output is to the target image, the higher your score will be. The platform uses a unique scoring system that takes into account the accuracy of the output and the length of the code. The shorter the code, the more accurate it is, the higher the score.

How to improve my score in CSSBattle Dev?

Improving your score in CSSBattle Dev requires a combination of accuracy and simplicity. Your output needs to be as close to the target image as possible, and your code needs to be as short as possible. You can do this by mastering CSS properties and values, understanding how different CSS properties interact with each other, and learning how to write concise and efficient code.

What are some tips for mastering CSSBattle Dev?

Mastering CSSBattle Dev requires practice and in-depth understanding of CSS. Here are some tips:

1. Understanding Box Models: CSS Box Models are the cornerstone of layout design. It is crucial to understand how padding, borders, and margins work.
2. Master positioning: Understanding how different positioning values ​​(static, relative, absolute, fixed) affect the position of elements can help you place elements accurately.
3. Learn to use abbreviated properties: abbreviated properties allow you to specify multiple properties in a single line, helping you write shorter, cleaner code.

How do I learn more about CSS properties and values?

There are many resources available online to learn CSS properties and values. Websites such as MDN Web Docs, CSS-Tricks, and W3Schools provide comprehensive guides and tutorials on CSS. Additionally, practicing on platforms like CSSBattle Dev can help you understand how different properties and values ​​work in real-life scenarios.

If I'm new to CSS, can I participate in CSSBattle Dev?

Of course! CSSBattle Dev is an excellent platform for beginners to learn and practice CSS. Challenges vary from simple to difficult, so you can start with simple challenges and gradually move towards more complex challenges as your skills improve.

How does the rating system of CSSBattle Dev work?

The rating system of CSSBattle Dev is based on two factors: accuracy and code length. The platform compares your output to the target image and calculates scores based on how well they match. It also takes into account the length of the code – the shorter the code, the higher the score.

Can I see other participants' solutions in CSSBattle Dev?

Yes, after submitting your own solution, you can view the solutions from other participants. This is a great way to learn different ways to solve the same challenges and can help you improve your coding skills.

What are some common mistakes that should be avoided in CSSBattle Dev?

Some common mistakes that should be avoided in CSSBattle Dev include: not fully understanding the CSS box model, not using abbreviated properties, and not optimizing the code to make it concise. It is also important to thoroughly test your code to make sure it can copy the target image accurately.

Can I use CSSBattle Dev to prepare for a job interview?

Yes, CSSBattle Dev is a useful tool for preparing for a job interview. It can help you improve your problem-solving skills, learn to write efficient code, and gain a deeper understanding of CSS. However, remember that job interviews may also cover other aspects of web development, so it shouldn’t be your only preparation tool.

How do I stay motivated while learning CSS through CSSBattle Dev?

Learning CSS with CSSBattle Dev can be challenging, but it can also be very interesting. The competitive aspect of the platform can motivate you to improve your skills. You can also set personal goals, such as reaching a certain score or completing a certain number of challenges to stay motivated. Remember, the key to mastering CSS (or any skill) is persistence in practice and patience.

The above is the detailed content of Code Challenge #2: 4 Tips for Higher Scores in CSSBattle.dev. For more information, please follow other related articles on the PHP Chinese website!