Freecodecamp: Using id for styling is an anti-pattern

[schalkneethling]

Challenge Name

Override Class Declarations by Styling ID Attributes

Issue Description

The above lesson as well as an earlier lesson in the current series, teaches students to use an id as a selector for styling elements. I personally feel that this should not be done.

While there can certainly be a lesson that explains that it is possible. I feel it should be framed with an understanding that it is a practice that should never be employed in projects.

Instead of going over the reasons for this, it is probably best to link to the css-lint documentation. https://github.com/CSSLint/csslint/wiki/Disallow-ids-in-selectors

[raisedadead]

We have always favored of linking best practices as supplementary guides / resources. Going by the philosophy I think a guide on the guides repo is a good idea.

Do you think we could merge this lesson into previous, or drop it all together without losing the connect?

[schalkneethling]

Do you think we could merge this lesson into previous, or drop it all together without losing the connect?

I feel very strongly about this one. Developers should understand from the start that using an id for styling is bad practice and should be avoided. I also think that talking about the details of this might be a bit to much at this point in the curriculum.

Perhaps this part needs to be rephrased with a link to more information? Perhaps there is a part of the curriculum where these types of topics are addressed?

[schalkneethling]

I feel the same about Override Class Declarations with Inline Styles and Override All Other Styles by using Important

Perhaps we can add a "disclaimer" of sorts at the bottom of these lessons that links to information on why these are not good practice?

We can write a custom one or reference documentation that is part of csslint

[schalkneethling]

The one on !important does have a pretty good piece explaining when to use it:

In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important

[raisedadead]

Yes, think this is a much better idea.

[mstellaluna]

CSS stylesheets are loaded in the order you place them in the HTML head (top to bottom). Example, I want to override bootstrap 4's CSS color's because I don't like them and want a custom color scheme in, I would need to make sure my CSS file that modifies boostrap 4's color scheme loads last.

[QuincyLarson]

@schalkneethling I think we should keep these challenges because we're showing people how CSS works, but I agree that we should add a note that doing this goes against best practices and that we'll cover the best practices in subsequent challenges. Would you be interested in updating the challenge copy to reflect this?

[schalkneethling]

Sure thing, thanks for the feedback @QuincyLarson

[tymeart]

Hi @schalkneethling, are you still working on this?

[schalkneethling]

@tymeart Please feel free to grab this if you want. Work has swallowed me up, and I am not sure when it will spit me out again ;p

[thecodingaviator]

@schalkneethling If you're free now, maybe you can start?

[amity]

Looked like this was available; I've gone ahead and thrown up a draft. Feedback greatly appreciated!

[scissorsneedfoodtoo]

Closing as stale.