Generally about CSS layouts: Smashing Magazine.
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 containin block (e.g., hero__text)
- Modifiers - variation of something (e.g. btn—success)
Here’s a YT video about it.
A good CSS preprocessor to use is SASS.
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.
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 to remember 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.