Tips for Building Modern Responsive Websites

I've recently been working on a front-end project, and here's what I have learned so far.

Create sections

Create logical sections with the section element. This way, you can collapse and expand as needed when working in VSCode. When working with containers, put containers inside the sections, not the other way around. Containers usually center content and apply a margin on the sides. But sometimes, you need a full-width background image with elements contained in the center. For that, you would apply the background to the section element.

Prefer class selectors over element selectors

I prefer using class selectors over element selectors. When reading the CSS selector in the CSS file, I know exactly where to go to find the corresponding HTML element. In practice, this would look like searching for the "how-card" vs. searching for the first div under "how-cards." It may be a pain to write initially, but one fundamental principle I always keep in mind is to optimize for reads, not writes.

Write the HTML first

My mistake when starting was that I was doing structure and style at the same time. It's much easier to focus on one thing at a time. When focusing on creating the HTML elements, I think about the correct elements to use for correct semantics and improved SEO. Then when I work on styling the page, I style it desktop first and then go responsive down the sections.

Use SCSS

The best thing about SCSS for me is that I can nest selectors. I can easily apply selectors to a page class without prefixing all my selectors with the page class. I don't mind that there might be some overlap with styles. It's hard to make CSS generic, and doing it wrong will only be a nightmare later.

Group media queries

With SCSS, it's possible to nest @media queries inside class selectors. Please don't do this. Think about when you need to update the behavior at a breakpoint; you'd need to find all the media queries in every section of the stylesheet. Instead, group all @media queries at the bottom and reimplement the styles above for the breakpoint.