DEV Community

Discussion on: IDs vs Classes: a CSS Specificity Chapter

Collapse
 
lautarolobo profile image
Lautaro Lobo

You mean, when there's only one CSS rule to add to the element?

That means that your project is small. But it will grow.

Imagine that you want to add more styles one day, then you end up with a bunch of CSS inside your HTML... that's not easy to read, and also when working on your CSS file you may forget those inline styles, ending in a situation where you are asking yourself: where are these styles coming from!?

Also, if you add more inline styles you won't be able to reuse them.

It is simply better to have all the CSS on a different file, therefore you will avoid spaghetti-code and you are keeping the specificity levels low, so you will be able to solve conflicting styles better (without using !important).

You never know when your project will grow, and even if not, it's better to get used to good practices since the beginning of your career. So you won't be fighting against yourself when working on bigger projects.

Hope it helped :)

Collapse
 
whizkevina profile image
Aina Oluwatimilehin

Thanks for your great comment..
Yeah, It helped..

But Is there anything for giving CSS class name or what to consider when giving class name for a project...

Thread Thread
 
lautarolobo profile image
Lautaro Lobo • Edited

Yes, here you have a freeCodeCamp post about BEM (Block-Element-Modifier). It's not really easy to use, I recommend to practice with it and you'll finally get used to it and know how to use it properly.

That's the most common thing when writing CSS classes I think.

SMACCS talks about naming conventions on CSS classes too, but it's not the main focus of the book.

Anyways, there are some others like ABEM and OOCSS. I didn't try them though.

PS: I forgot to say, if you work with Bootstrap, or something alike, you will use the predefined classes that come with it.