CSS Battle #2 - Carrom
Tags: webdev, css, html, tutorial
Published: 2019-06-10 20:23:15

It already happened to me during the first battle, but at least, I knew what was wrong.

{% twitter 1135142385728589824 %}

This mismatch, when your result looks quite, but not exactly the same, is frustrating. The first one was simple. I thought to myself, hey, I've heard about _Responsive Design_, I am a _Software Engineer_ after all, I shall not use hardcoded values! But `66vh` doesn't equal to `200px` out of total 300. So, an engineer as I am, I just boldly typed `200px` in and it worked. This time was different.

## 1. The Almost Correct One

In my previous company, we had a lot of full-stack developers, who preferred to avoid frontend tasks. _Fullstack Backend Developers_, as one of my colleagues stated. (In this particular case, since the backend was in C#, we couldn't them [Backend Frontend Developers][3])

![Scared of CSS](https://pics.me.me/what-is-a-backend-developer-backend-developer-it-mean-he-41886990.png)

As I found out, while fighting through CSS battles, `floats` were originally intended to place images within the text. (Just the same way `tables` were intended to make tables) The better way is to `inline-block` elements. Or even better is to use Flexbox or Grid. So I decided, screw floats, I will push inline-blocked divisions with the margins where I want to.

```css
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<style>
  body {
    margin: 0;
    background: #62374e;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    display: inline-block;
  }
  #a {
    margin-top: 50px;
    margin-left: 50px;
  }
  #b {
    margin-top: 50px;
    margin-left: 200px;
  }
  #c {
    margin-top: 100px;
    margin-left: 50px;
  }
  #d {
    margin-top: 100px;
    margin-left: 200px;
  }
</style>
```

This is when I got a 98.7% score. Eventually, after solving the problem using another way, I learned that for `inline-block` elements the spaces in HTML matter. There are [various ways to resolve this issue][4], most notably, setting `font-size` to zero on `body` element, which would lead to increased character count (sure, I'll not reach the high score with this approach anyway, but still), and just removing the spaces between the divisions. Place all four divs squeezed into one line and it would work like a charm.

## 2. Fixed Positions

After failing a couple of times trying the first method, I remembered that I am a respectable _Software Engineer_ and decided to go quick and dirty all the way - giving each division a fixed `position` with exact `top` and `left` coordinates.

```css
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<style>
  body {
    margin: 0;
    background: #62374e;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    position: fixed;
  }
  #a {
    top: 50px;
    left: 50px;
  }
  #b {
    top: 50px;
    left: 300px;
  }
  #c {
    top: 200px;
    left: 50px;
  }
  #d {
    top: 200px;
    left: 300px;
  }
</style>
```

## 3. Borders

What if we didn't need the background color for `body`? What if we could create a massive border around each square? Sure thing! We don't even need `ids`, we can use `even` instead (pun intended). `font-size` is here for educational purposes only.

```css
<div></div>
<div></div>
<div></div>
<div></div>

<style>
  body {
    margin: 0;
    font-size: 0;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    border: 50px solid #62374e;
    display: inline-block;
  }
  div:nth-of-type(even){
    border-left: 150px solid #62374e;
  }
</style>
```

As you may have noticed, since our canvas is not a perfect square, I am adding an exception for every even `div` to have a larger on the left side, non-square border.

## 4. Pseudo Elements

Four divisions and we are only styling them based on even and odd? This sounds like duplication to me. Can we cut it in half? Yes, if we use pseudo elements. Let's say we have two regular `divs` having their shapes duplicated with `::after`. We first style `divs` and their `::afters` and then lay them out separately.

```css
<div></div>
<div></div>

<style>
  body {
    background: #62374e;
  }
  div, div::after {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
  div:nth-of-type(odd) {
    margin: 50px 42px;
  }
  div:nth-of-type(even) {
    margin: 100px 42px;
  }
  div::after {
    content: "";
    display: inline-block;
    margin-left: 250px;
  }
</style>
```

By the ways, all of these `42px` appear here and there because 42 is the answer to ~~Life, the Universe and Everything~~ `50px - 8px`, the default margin. Also, you can safely replace the `body` tag with \* if you are not setting `margin` or `padding`.

## 5. Box shadow

Is there something more elegant? What if we didn't need four divisions? Can't we try to replicate one three times? Do you remember paper staples? `box-shadow`? Actually, we can specify multiple shadows separated by commas. Here is how it looks like.

```css
<div></div>

<style>
  body {
    background: #62374e;
  }
  div {
    margin: 50px 42px;
    width: 50px;
    height: 50px;
    background: #fdc57b;
    box-shadow: 250px 0 #fdc57b, 250px 150px #fdc57b, 0 150px #fdc57b;
  }
</style>
```

Do you see what I see? Does anything bother you? `#fdc57b`. Four freaking times! Shouldn't there be something like `box-shadow-color`? Unfortunately, no. But! [Box shadow defaults to color value][5]. So here we go again.

```css
<div></div>

<style>
  body {
    background: #62374e;
  }
  div {
    margin: 50px 42px;
    width: 50px;
    height: 50px;
    background: #fdc57b;
    color: #fdc57b;
    box-shadow: 250px 0, 250px 150px, 0 150px;
  }
</style>
```

Did I miss anything significant?

[1]: https://twitter.com/epinardscaramel/status/1135142385728589824
[2]: https://cssbattle.dev/play/2
[3]: https://hackernoon.com/the-backendification-of-frontend-development-62f218a773d4
[4]: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
[5]: https://stackoverflow.com/a/10989662