How to Become a Master in CSS in 5 Simple Steps
As you know- I lately left my comfort zone, closed Android Studio and dived straight into a scary, rough sea called Web Development. An integral part of building web apps is working with CSS. For the ones that not familiar with Cascading Style Sheet- this is how web developers design their web pages, give it some life and structure, add animations and lose their sanity while doing so.
In this post, I’ll try to describe what it takes for one who wants, for a reason I can’t understand, to become a master in CSS in 5 simple steps:
1. Lose your intuition
So you just need to add one more button to the end of the form, how hard it can get, right? PLEASE DON’T SAY “RIGHT”!
For instance, CSS doesn’t like the right side, it will always prefer left. Because when you’ll add float: right; something wrong is bound to happen. Some elements will change their positions; some divs will go over each other; some old versions of IE are going to display your page upside down. Why? I don’t know.
How to solve it? You probably need to add overflow:hidden to the parent element (or adding dummy div to clear floating, of course). Why? Again, I don’t know.
This is how CSS works, you think it is supposed to work one way, but you’re usually wrong.
2. Practice meditation regularly
To continue with the previous part- when dealing with CSS, lots of things won’t work as expected. You can try to understand the logic behind it, but usually that would be just a wast of time.
So what I recommend- before each day you know you are going to work on styling your page, take a couple of minutes and let your body and mind relax. Meditate with this in mind: “this is going to be hard, this is going to be rough, but this is just software, and I won’t let this non-deterministic system get on my nerves.”
This, combining with removing any sharp objects away from your desk, can make your life (and your team’s life) much more peaceful.
3. Don’t refresh your page. Ever.
When working with CSS, you’re getting used to working straight on the browser, in that way you can easily play with your elements properties and get immediate feedback.
But while a non-experienced developer will lose all his changes when accidentally refresh the page, a CSS master will know that refresh button is forbidden. Especially not before showing the result to the product manager.
I have a theory that that’s how single page application was invented.
4. Subscribe to some newsletters.
Web development is a rapid pace changing environment. Frameworks change quickly, every week there’s a new shiny library and new concepts are introduced on a weekly basis.
The best way to be on top of new tools and ideas is to subscribe to one or more newsletters.
That way you’ll be able to say things like: “Oh you’re still using Flexbox? I just use CSS grid now; its the shit” when your PR completely messed up the page layout, and you don’t know why.
5. Work on your persuasion skills.
One day your designer will come to you with a crazy UX concept that you absolutely have no idea how to implement. But you’re a CSS master, and masters can’t admit that they don’t know how to do something.
So what can you do? Simply drive him out of it:
“Oh, we can’t animate it because it will break our site accessibility.”
“Floating views just look bad on mobile, believe me.”
“Material cards? Are we still in 2015?!”
“Pffff, like Facebook?! They’re putting their CSS in their JS! Those guys are crazy!!”
Continue with this until he is ok with your standard Bootstrap starter template website.
Afterword: this post is sarcastic, and I admire each one and one of you out there that can align a text properly right next to the thumbnail just like the designer meant it to be.
If you enjoyed this post, please hit the “recommend” button below and share this story. I’ll also love hearing your comments. Thank you!
Originally published at shem8.github.io on August 25, 2017.
