CSS Tips

Resources

Generally about CSS layouts: Smashing Magazine.

Border-box setting

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

BEM

Naming CSS classes is hard. Especially in bigger projects. There are some CSS naming systems. BEM is one of them and it’s quite simple. It focuses on defining:

• Blocks - something that can exist on its own (e.g., hero)
• Elements - something that is dependent on a containing block (e.g., hero__text)
• Modifiers - a variation of something (e.g. btn—success)

Here’s a YT video about it.

SASS

A good CSS preprocessor to use is SASS.

Media Queries

We can either design our sites mobile-first or desktop-first. Usually, the latter is chosen (although the first option makes more sense nowadays). Then, the media queries are created for mobile.

Thresholds

There are two main techniques for choosing breakpoints:

• looking at sizes of specific devices (like iPhone or iPad) - there are so many devices nowadays, that this might be overwhelming
• looking at our desktop-first site, resizing it, and just looking where it starts to look bad - probably a better alternative

It’s also worth remembering that realistically:

• people are not going to change the size of the window too much while seeing the site
• some sizes are not going to be used

What that means is that probably it doesn’t make sense to invest time into making the site look great on every possible screen size. Just focus on the realistic ones.

Here’s a nice article with some reasoning: freeCodeCamp.