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!
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.
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.
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.
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!
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 :)
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...
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.
If you are testing a fix you don’t need inline styles, test the fix in the browser.
But When if I needed to apply the fix to the element.
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.
Thanks so much, for this eye-opening technique which I don't take note of.