CSS, the styling language for the web. Things may seem easy at first, but when margins and padding step into the mix, things may start to get a little outta hand. And with different browsers each implementing CSS in a different way, now you have to add these weird prefixes to make sure the 259 different properties work as expected.

That enough to drive me nuts.

Today I'm going to give you some tips to make sure your CSS is CSS-ing. If that sounds interesting, let's jump right in.

Tip 1: Actually Learn CSS…

Not Tailwind, Not Bootstrap, but the OG CSS. A lot of devs skip learning the actual CSS, and jump into a commitment to some random CSS framework and its long ass class names👀. If you are under this category of developers, fall out😑

Why do you do the things that you do?

Please do yourself a favour and actually learn the fundamentals, because it teaches you how CSS actually works, plus you don’t have to keep bearing the pain of looking at Bootstrap’s horrible styling. Enough said, next tipppp…….

Tip 2: Learn the Box-Model

The box model is the most fundamental piece of information you need to know as someone who writes CSS because it illustrates how your HTML elements are styled with CSS. Incase you haven't heard of Box Model before or you're one of those guys who decided to skip it :/, I've got good news. The Box Model is actually really easy to understand, and you're going to learn it right now.

Every element in your HTML code is a box (your h1, nav, div, etc).The content of the box is whatever you put inside that tag .You can give each box a width and a height. The box can also have a border of any thickness. If you want to make space around the box, you give it a margin, if you want to squeeze-in the contents of the box, give it some padding. And that all there is to it. Seeeeee……that wasn’t bad, was it?😏

Quick heads up: Sometimes you may give an element some padding, and it seems as though the padding increased the width or the height of your element causing it to overflow, use box-sizing: border-box; to get it back to it's orginal size.

Tip 3: display: flex; is your friend

If you are trying to arrange some items on your webpage, display: flex; is always the way to go, except you’re trying to arrange it in rows and columns(then you use display: grid, more on that later). When you apply display: flex to an element or a container, the contents of that elements flow either horizontally or vertically(row or column respectively), but by default it is horizontally. You can control this with the flex-direction property. To arrange the items on the vertical axis, use the align-items property.

To arrange the items on the horizontal axis, use the justify-content property.

This is just a fraction of what flexbox can do, for a complete guide on flex, click here. The most complete tutorial on flex I've seen.

Tip #4: flex vs grid??:

Don’t know when to choose between display:flex and display:grid? Lemme help you out with that You use display: grid when you are trying to arrange different boxes/items in rows and columns. Grid basically focuses on both row and colums. Unlike grid, flexbox(display: flex) arranges items in just one direction, either row or column. You can change this with the flex-direction property.

You can use flexbox for something like this.

You can use grid for something like this.

Tip 5: Use CSS shorthands

If you prefer the one at the left, well I got no words😐.

Basically I'm saying, you should learn to use CSS shorthands, so you don't end up overcomplicating things. This may not seem like a big deal, but in the long run, this would probably lead to a larger CSS file that the browser has to download when users visit your site. If you find it difficult trying to memorize the order of the shorthand values, just think of clockwise rotation: top -> right -> bottom -> left. Therefore, margin: 15px 10px 4px 8px; means 15px for top margin, 10px for right, 4px for bottom, and 8px for left.

Bonus Tip👀

If you want an element to appear on top of another, use the z-index property. An element with higher z-index will appear on top of an element with a lower one. i.e. An element with z-index: 10; will appear on top of another withz-index: 3;

That's all for this week. Thank you for reading 🤭. If you liked this article, please drop a reaction and let me know in the comments if you want to see a part 2 of this article.

If you found this helpful, give me a follow for more related content.