css tips

(for avoiding a fight with your website)

Here I'm gonna list the basic rules I like to follow in order to keep my css understandable. I thought it might help people who get stuck fixing their layouts often.

1. avoid. margins. just. don't do them.

Unless you've tried it, margin seems to make sense at first: you add it to an element, and it gets spaced to the side.

DON'T let that fool you. Margins become a hell to manage very quick.

if you check it's code, you will see that my page probably never uses it. Here's why:

• whenever you want to change where your element is located, it's margins are moved along with it. It's almost never what I want, since usually I have to fine tune the margin depending on the postition of the element
• if there's two margins adjacent to each other, they f*****g merge into one (that has the biggest size of the two). I can't tell you who thought of this, probably the devil himself. A lot of people don't know about it, and expect the margins to be the same, and it just leads to a lot of confusion.
• centering stuff with margin: auto is probably fine though, as it doesn't really interact with other elements that much.

'but scarecat,' I hear you say 'how do I add spacing without margins????'

So here's a list of alternatives you can use:

• The most important one: almost every margin can be replicated by adding padding to the parent instead, which avoids the weird merging behaviour, and makes it so that if you move the element out of it's container, the margins wont move along with it, and even if you were to replace that element with another, the gap will remain the same. Speaking of gap:
• For flex and grid layouts: usually gap is all you need, it adds space between elements. Still, in some situations might want to tune the gap for a specific element with margin, but unless it's negative margin you can also replace it with padding.

2. don't do float layouts

this should go without saying lol. Float layouts were always kind of hacks, it requires a ton of very specific bizzare stuff (like clearfix and very precise sizes of your elements).

If you're wondering: 'why is the float element even there?', it's for a situation where you have an image (or a different widget / object), that you want to float to the side, while the text floats around it. If I didn't get lazy there should be an example here.

Of course, if you are going for the true 2000s retro experience, you can go with floats, I won't stop you.

If you don't care about that though, good alternatives to float layouts are, obviously, the flex and grid layouts. <3

3. quick and dirty mobile layout for grid based layouts

A very simple and short tip that might work (if your layout is simple enough and is using grid or flex).

Pretty much all you need to do is switch the layout of your main container to display: flex; with flex-direction: column;. This makes all of the grid elements go from top to bottom instead.

/* taken straight from my css */
@media (width < 480px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

This should also work on flex layouts too. Also keep in mind you might need to put it on more than one container, in case they're nested

4. i will add more later okay? okay. thankz.