For the fullstack developer who is secretly a backend developer (don’t be scared of CSS)
By: Cup Of Code
Tags: Web Development, Full Stack, Backend Development, Software Development, Front End Development

This is why I rather not dealing with CSS

My affair with CSS

I am a junior fullstack developer, working at Motorola Solutions, developing frontend in Angular and backend in C#. At the beginning I was doing mostly backend tasks, for three main reasons:

First, I thought that CSS is a waste of time, that it’s not real programming and not as important as developing system features (and boy, was I wrong).

Second, I had experience with C# from school and no experience in Angular. The other student developer, on the other hand, came with a background in Angular.

The third reason, which is another aspect of the two above, is that it took me a lot of time (an obvious side effect of avoiding it). I didn’t use the tools correctly and then felt bad about the fact that such a simple and unimportant task took me so long.

I was so against frontend, that as preparation for writing this article, I asked my friends from school if we studied web development as part of the university coursework (AKA worked with CSS). Of course, they told me that we did, which only made it clearer that I was avoiding CSS since day 1 of my career.

Why is CSS so important?

Let’s start with the obvious: you’re a FULLSTACK developer. There are clear perks of writing a feature e2e, and to be able to do so — you need to know frontend in general and page design in particular.

And let’s be real: how long could you define yourself as a fullstack developer with X years of experience, without conquering this field? the more you wait, the bigger the gap will be.

Second, notice that CSS isn’t only just moving the button 2px to the left, it also includes fixing some serious bugs, ones with which you just can’t release your application. For example, I’ll show you the bug I had which gave me this epiphany:

The tool-tip is showing on the screen as it was a part of the left graph, even though the mouse is hovering over a column on the right graph

And it’s not just a matter of appearance: things like buttons hiding behind other page elements or fields enabled-disabled at the wrong moments could be crucial in your app.

Third, I think UX/UI is underrated among developers. We need to remember that in this era there is a big competition and many products that do the same. The crucial distinguisher between the competitors is mostly the user experience. That is what Apple, for example, based her strength on.

You can call it Idiot-ism, or you can learn the importance of user experience

Let’s be clear: It’s no different from the common saying, that people would rather hire someone who is less professional but more friendly (AKA “someone they can grab a beer with”).

Learn from my mistakes:

I’m embarrassed to admit how long I worked on CSS tasks without using the inspect. Yes, I know, It’s horrible. It means that for enlarging the border from 1px to 2px I changed the CSS file in Angular and compiled the whole project!

We’ve talked about the CSS tasks taking longer then you’d expect, add Angular’s compilation time for every tiny change, and you’ll understand why it felt to me like a big waste of time.

Inspect is part of Chrome DevTools, which is a set of web developer tools built directly into the Google Chrome browser. When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel.

I’ll show you that it’s not that scary:

******

We’ll start with something simple:

Changed color to the “Draft” tab in the header

I opened inspect, selected an element from the page to inspect, in this case, I chose the “Draft” tab from the header, and changed it’s color to pink.

******

You can also add fields, not just edit existing ones:

Added a margin-top tag to the “Draft” item in the page header

In this example, I added a margin from the top, which made the menu tabs get lower.

Notice that this change influenced the “Saved” tab too, not just “Draft”! (in contrast to the color change). Why? This needs to be investigated, I don’t know, some CSS magic. That is a good example of why it’s essential to master CSS! You get a new task - “Add margin to the first tab”, you are sure it’ll take only 5 seconds, and then you find out that a change was made in a whole different location!

Trying to change style is like...

********

It’s very tempting, especially when the task takes longer then you expected, to use the solution that looks OK now, instead of the correct solution.

For example, allocating an object absolutely when it should be relatively (what will happen when the page resolution changes?), or using margin-padding-border incorrectly:

The difference between margin, border, and padding

Why is the later problematic? for the same reason, we design before we write the code, or generalize features: you don’t know what will happen in the future, and you need to prepare as good as you can. Using the wrong property will come back to bite you when future changes will be made, and all the time you thought you saved in the first place will be wasted now, plus “I changed the margin of “Draft” why did “Saved” move with it!?$#@%$#@^$” frustration.

Was it persuading?

I hoped I managed to convince you the importance of CSS, and show you that it’s not as scary as it may seem at first. Mastering CSS and styling will make you a better programmer and will save you some precious time and energy in the future.