web development – CSS tooling: What do you use to work with your CSS?

For my job as a frontend developer it’s often the case that I first need to create markup, then write styles and only then functionality on top of it.

Usually I do it this way:

  • write HTML structure and classes without looking in the browser, seeing a design layout I separate it to blocks in my head
  • write styles in the file, those styles which I’m sure about like often it’s display: flex etc. meaning styles I can easily imagine the result for
  • open everything in the browser and write some additional styles for different blocks in the devtools, fix already written styles etc
  • copy a new set of styles from the browser and paste it in my .[s]css file

But lately I started to wonder is there a better way and what other frontend developers use to write their styles.

What way are you doing this? I feel like there is nothing wrong with my approach, it always has been working, I’m used to it, but I would want to know if there is a better one maybe.