CSS Battle #8 - Forking Crazy
Tags: html, css, webdev, tutorial
Published: 2019-07-08 11:00:01

You know what? The title says it all. _Forking_ Crazy!
This was by far [the most challenging piece][1] of all. Even though there is another one I couldn't solve yet.
The thing is, it is difficult to match the smallest details if you don't have any clue about the measurements. You'll see below loads of some magic numbers, which came up out of nowhere, after hours (or probably minutes, to be fair) of fine-tuning, and somehow managed to settle.
I will try to explain my only solution to this problem. By the way, this is by far the longest one character-wise, resulting in whopping **1454 characters!** If you care about the score, and it only makes sense if you have something below 350 characters (otherwise you'll get a score of 600 for anything else) you should go and use [battle tips][2]. To be fair, you should only use them once you are fully aware of what you've done and what you're up to, because those are mainly exploits of the errors, which browser would forgive you, like omitting closing tags.

## The solution

Let's start with styling the `body` tag. We obviously give it a `background` color first and then a `padding`, to frame our working space. So, we limit our figure to be `50px` away from the top and `130px` away from the sides. Keep in mind, that the written numbers include the standard browser margin of `8px`. You can, of course, define all elements relative to the whole window using margins, thus reducing the number of characters, but I chose not to do so since there is enough complexity.
The whole figure will consist of five parts:

### 1. The upper part

This is the part where we define the upward facing [tines][3]. It carries the name of `bg`, short for the background since its background is the same as the one of the `body`. We limit its size to `140 x 20` and give it a `font-size: 0`, to make our `inline-block` divs more readable instead of [packing them like sardines in a crushd tin box][4].
Inside we have four half circles, to be fair, which are looking to the top. Each of them has a size of `20px` and darker background color. All apart from the very first one also have `margin-left: 20px`. Now that look at the solution once again, I think it might have been more [elegantly solved by a flexbox][5]. For that, you'd need to give a parent class `display: flex` and `justify-content: space-between`, to avoid ugly left margins. Hmm, maybe I'll write more solutions than I planned to.

### 2. The stripes

At the very beginning, I seriously considered making each one of the stripes an own `div`. But then a revelation of a [repeating-linear-gradient][6] came to and I understood it was nonsense. Instead of styling two repeating divs with respectively a darker and lighter blues, which is the worst, or styling only a darker div and repeating it with margins, which is better than the previous proposal, we take it a level higher. We create `striped` id of `140 x 70` with a gradient, which goes from the left to the right. Note that the colors are repeating at the beginning and the end of each stop in order to avoid the gradient effect and make it look like an evenly colored line.

### 3. Tines end

This part is very similar to the upper part. It has half circles, which have a lighter blue as their background and margins between them. The `background` of the whole line is `darker`.

### 4. The bottom

The bottom part is of size `140 x 90` and has rounded corners of `90px`. There is nothing spectacular about the bottom part.

### 5. The stick

Maybe you shouldn't ask me about this last piece.

![Magic](https://pics.me.me/lige-https-en-m-wikipedia-org-e-search-wikipedia-magic-programming-page-issues-2571475.png)

We are placing a stick relatively so that we can lift it above the bottom to avoid a weird gap at the conjunction if we were placing our stick statically. It has a size of `20 x 60` and `margin-left: 60px`. Then we lift it ten pixels by giving it a negative value.

```css
<div class="bg">
    <div class="upward-circle"></div>
    <div class="upward-circle left-margin"></div>
    <div class="upward-circle left-margin"></div>
    <div class="upward-circle left-margin"></div>
</div>
<div id="striped"></div>
<div class="bg darker">
    <div class="downward-circle left-margin"></div>
    <div class="downward-circle left-margin"></div>
    <div class="downward-circle left-margin"></div>
</div>
<div id="bottom"></div>
<div id="stick"></div>

<style>
  body {
    padding: 42px 122px 0;
    background: #6592CF;
  }
  .bg {
    font-size: 0;
    width: 140px;
    height: 20px;
  }
  .darker {
    background: #060F55;
  }
  .left-margin {
    margin-left: 20px;
  }
  #striped {
    width: 140px;
    height: 70px;
    background: repeating-linear-gradient(
      to right,
      #060F55 0px,
      #060F55 20px,
      #6592CF 20px,
      #6592CF 40px);
  }
  #bottom {
    width: 140px;
    height: 90px;
    background: #060F55;
    border-radius: 0 0 100px 100px;
  }
  .upward-circle {
    width: 20px;
    height: 20px;
    background: #060F55;
    border-radius: 20px 20px 0 0;
    display: inline-block;
  }
  .downward-circle {
    width: 20px;
    height: 20px;
    background: #6592CF;
    border-radius: 0 0 20px 20px;
    display: inline-block;
  }
  #stick {
    width: 20px;
    height: 60px;
    z-index: 1;
    position: relative;
    top: -10px;
    background: #060F55;
    margin-left: 60px;
  }
</style>
```

![Finally](https://pics.me.me/its-over-its-finally-over-26367283.png)

And let's try to optimize it! We start it by using a shiny flexbox. By the way, make sure you know how flexbox and grid work if you are applying for a frontend position.

Our `bg` class now is a flexbox which would evenly distribute its content, creating an appropriate space in between.

```css
.bg {
  width: 140px;
  height: 20px;
  display: flex;
  justify-content: space-between;
}
```

You can safely remove `left-margin` classes next to the `upward-circle` and see exactly the same outcome on that part of our figure. Suddenly, the tine-body conjunction now looks broken. Let's fix that. We reduce our width to `100px` and `20px` padding from both sides to recreate our figure from before.

```css
.darker {
  width: 100px;
  padding: 0 20px;
  background: #060f55;
}
```

Now we can remove `left-margin` class completely from both `HTML` and `CSS`. And `font-size: 0` as well. **1409 characters** and counting. Do you feel [the unbearable lightness of being yet?][7] This is not exactly how you reduce your bundle size (you do it by [removing left-pad][8]), but that is something to keep in mind.

We can still lose some weight, though. Or, speaking more accurately, width. Since we enclosed our figure with padding from all around, let's just go and delete all that `width: 140px` everywhere. The elements will just take all the available space. **1355 characters.**

There are two colors used throughout the task - light and dark blue. We have to have declared at least once each, but there is definitely room for improvement when you look at the current state. Light blue has to be used for `body` in order to give us the wanted background. What if we every other element to have a dark blue as a default background?

```css
* * {
  background: #060f55;
}
```

`* *` means everything which is inside of the `body` element would have our dark blue. `bg` gets broken, but let's remove `background: #060F55` from the other elements. That would be `.darker`, `#bottom`, `.upward-circle` and `#stick`. Now we can fix `bg` by specifying the lighter blue `background: #6592CF`. This will break the downward facing half circles and so we set `background: #6592CF` for `darker` class. **1343 characters.**

`upward-circle` and `downward-circle` read like a lot of characters, especially if you reuse them lots of times. Let's extract the common logic and rename the classes. We know, that this is the main shape:

```css
.circle {
  width: 20px;
  height: 20px;
  display: inline-block;
}
```

and these are the things that give the direction and color:

```css
.up {
  border-radius: 20px 20px 0 0;
}
.down {
  background: #6592cf;
  border-radius: 0 0 20px 20px;
}
```

In order to shovel away just a little more, we can define `border-radius` of the `up` class to be in `circle` instead, thus eliminating the need of `up` as a separate class. `down` will still remain the same. If you remove 4 usages of `up` class in the markup, you will have only **1223 characters** remaining.

Since we know exactly how much space we have in our disposal, having a _fixed_ width and height of `400 x 300` pixels, we can rephrase our stick. We fix the position and set `top` and `left` values instead. **1200 characters**.

```css
#stick {
  width: 20px;
  height: 60px;
  position: fixed;
  top: 240px;
  left: 190px;
}
```

I hope you enjoyed the journey just as much as I did. Even though this challenge is basically solved using one solution, I believe this time it was deeper thought sharing. We reduced our solution by 254 characters, in which some crazy CSS hackers can fit 4 solutions of the first challenge, and it is still semantically correct, readable and maintainable. Unless you've told me there is another more elegant solution, we can be proud of ourselves.

[1]: https://cssbattle.dev/play/8
[2]: https://cssbattle.dev/tips/
[3]: https://en.wikipedia.org/wiki/Tine_(structural)
[4]: https://www.youtube.com/watch?v=KXvrGsxU_II
[5]: https://css-tricks.com/almanac/properties/j/justify-content/
[6]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
[7]: https://en.wikipedia.org/wiki/The_Unbearable_Lightness_of_Being
[8]: https://www.davidhaney.io/npm-left-pad-have-we-forgotten-how-to-program/