When someone asks you to build a layout in HTML and CSS, how do you approach it? And how do you approach it in a test, versus working for production?

I've been interviewing, testing, and can't seem to figure out what the bar is. I have worked at places with long af .css sheets, and others with LESS compiled ones. Previously I based my ideas of how to write CSS on docs I had seen or glitch.com examples. I had also heard of the need to modularize CSS for different components to make it more reusable and shorter, and thus easier to read.

How I do It:

1. Make sure I've got prettier or a linter installed on VSCode.
2. Slice layout with guides in Photoshop, measure between elements
3. Decide which areas require grid and flexbox.
4. Start new HTML doc, embed external CSS file, convert px to em, include 3 media queries OR prototype with tachyons or bootstrap
5. OR Include all interactions with vanilla JS or use a JS framework

Docs and library code looks really thorough (ie. media queries for small, medium, desktop screens), and so I try to mimic that. After getting some feedback I realize that I'm overcomplicating stuff and my CSS is disorganized.

Here's some things I've gathered for improvement so far:

• if using grid, use height: 100vh to make the minimum height appear the height of the viewport
• apply style using classes with semantic names instead of IDs or elements (i.e. .site_header instead of #header ul)
• include cross-browser prefixes for any animations or exceptions (i.e. for drop-capitals in Safari or webkit- for Safari and moz- for Firefox and ms- for IE. Using an autoprefixer makes that easier.
• convert any sizes to em and rem instead of px
• Use grid or flexbox where available, always stick to a grid
• Write as little to accomplish the most as possible, detailing margin and padding on every little thing makes your styles confusing for someone else to read.
• To make everything show as the size it should in the design, use *{box-sizing: border-box;}
• Stay away from inline styling at all costs.
• float as a positioning selector is a thing of the past.
• !important does not always fix a problem

I'm open to you challenging any of these since this is cobbled-together afterthought based on medium posts and observing glitch community examples

I also have some questions for devs:

1. What do you do about responsiveness for mobiles when you get one layout? I totally get clarifying with the designer about what the decisions around positioning and stacking order may be and communication is key.But in the test situation or working with freelance clients who don't always know what they want, what do you usually do? I default to a hamburger menu with a slide/dropdown.

2. Any particular choice on grid (4, 10 or 12 columns. 30em, 40em) ?
   I'm really tempted to use exact pixels on a smaller number of columns to make it match the desktop version as much as possible but ultimately I'm really confused about this. I've also seen grid layouts with the smallest grid item repeated 9 times... I suppose it depends on the design.

3. How many media queries do you include? How do you decide where the breakpoints are?
   I have seen totally functional examples with folks writing for only one screensize (400px or 768px). Is that enough?

4. Any opinions on using CSS vs JS for animations?

5. At what point do you see it necessary to use SASS or LESS? Is BEM still a thing?

Annnd... while it is my life goal to be really good at JS, I can't help being curious. I've discovered CSS is something I'm prone to think it's easy to be good at, but actually full of so many specifics.
... any other thoughts or crits are much appreciated! Thank you for reading!

Update: Just discovered Jen Simmons' Layout Land series on YouTube and added a link to that because she's so great at explaining the differences and pros/cons to CSS grid/flexbox

Some other sources I'd been reading over the last few years:
Simplify Styling with Functional CSS | Rangle.io
Common responsive layouts with CSS grid and some without | Medium
Beginner's Guide to Choose Between Grid and Flexbox | Medium
CSS Grid Starter Layouts | CSS-Tricks
Holy Grail Layout CSS Grid
In Simple Terms: CSS vs Javascript
Myth-busting CSS Animations vs Javascript
Flexbox vs. CSS Grid — Which is Better? | Jen Simmons for LayoutLand on YouTube