Choosing ideal IDs and Class

Question

I struggle with what name to choose for an ID or Class. For example, as I’m writing out my HTML I’m also trying to figure out what to name a class so that I can target it in CSS.

When using flexbox and grid containers I feel like I’m all over the place with multiple classes and IDs.

Any guidelines or best practices with structuring html code. Should I assign classes and IDs as I go? Or as I’m about start styling with CSS?

Answer 1

These links have some good suggestions:

https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/

https://www.makeuseof.com/css-class-and-id-best-naming-practices/

https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/

https://www.scaler.com/topics/css-class-naming-convention/

Answer 2

On top of those great resources from Bob_Li you should also check out Tailwind. It is a library that brings a lot of predefined styles that you can mix and match as required. That way you don't need to come up with those names yourself, just use what is already available.

https://tailwindcss.com/

Answer 3

Thank you