I find that I use classes a lot more than id’s, but they have their place too.
When I first started building the pomodoro timer, I wasn’t even aware of FCC (someone had posted a question on stackOverflow, and I was helping from there), and I built the thing the way I would: I created an increment/decrement component, a timer component, and some actions components. Each component was given an ID (so, for example, #breakIncrementDecrement
, or #myTimerWidget
), but within the component, everything was classes. It allows me to style the component without potential crashes, it allows the component itself to easily access its own internal bits, and it avoids having multiple instances of the same component have clashing ids.
I’m not a fan of names like #break-increment
or #session-length
– I’d rather have the component have the only id (#breakIncrementDecrement
, for example), and within that use classes (.increment
, .decrement
, .length
).
Much the same with the survey form – if there are field groupings, an ID at that level might make sense. For example, a multi-page survey form might be a single form containing multiple divs, each containing related survey questions. Each div might represent a ‘page’ of questions, and should have an ID, but the parts within that ‘page’ may not need, and probably shouldn’t have, id’s.