loading...

Discussion on: IDs vs Classes: a CSS Specificity Chapter

Collapse
whizkevina profile image
Aina Oluwatimilehin

Nice one,
You said inline styling is bad, but if there's a situation you just need to apply just a style to an element do you need to create a new class for it...
IDK if you get me!

Collapse
lautarolobo profile image
Lautaro Lobo Author

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 Author

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.

Collapse
gruckion profile image
Stephen Rayner

If you are testing a fix you don’t need inline styles, test the fix in the browser.

Collapse
whizkevina profile image
Aina Oluwatimilehin

But When if I needed to apply the fix to the element.

Thread Thread
sl4rtyb4rtf4st profile image
Andrew Millar

Let's say you element is a link inside the last <li> inside an <ul> with the class 'nav'. Then you can target that element in your style sheet using .nav li:last-of-type a { ... }

You don't have to use a class to target an element.

Thread Thread
whizkevina profile image
Aina Oluwatimilehin

Thanks so much, for this eye-opening technique which I don't take note of.