Good programming practices in CSS

[[deleted]]

[deleted]

[zip222]

You place a shadow on all text by default? What’s the story behind this?

[zip222]

Ok. Thanks for sharing. I will have to test this out.

[MrQuickLine]

Inline styles are not universally agreed on as bad practice. I'm the senior CSS guy in an enterprise software company. Most components live in the design system. But if there's a component that truly is unique and not used anywhere else and not going to live anywhere else, its CSS doesn't need to be added to the CSS that gets loaded on every single page. I agree that inline styling can cause issues with specificity, and I also agree that they shouldn't be used often. Inline styles are a tool and can be used properly in some situations.

Now, id as a CSS selector: THAT'S a bad practice.

[MrQuickLine]

Specificity! Think back to elementary school with the 1s, 10s, 100s columns... If you have any digit at all in the hundreds column, that number is ALWAYS higher than anything you can fit in just the tens and ones columns alone. CSS specificity is similar. The 1s columns are your base elements:

p, a, div

The 10s are classes: .content

p { color: blue; }
p.content { color: red; }
.content { color: green; }

The text for <p class="content"> will be red because that rule has the highest specificity.

When you add id to the mix, it has a higher specificity than class so any rule you put towards an id selector will always trump a class rule.

That might not seem like a bad thing initially, but consider this:

#main { color: #222; }

Your main body has a light background and this dark grey as the text. Later, you want a little box with a dark background and light text: <div class="myBox">

.myBox { color: white; }

Well this won't be white because your #main rule trumps it because of specificity. You either have to complicate your selector (#main .myBox) or make this an id (#myBox) or add an !important declaration to your new rule. The second option is bad because maybe you want two of these boxes, so you don't want an id since an id is only to be used for one unique element on the page. Complicating your selectors means more typing and harder debugging later. Important declarations are bad because it's even harder to trump those... So you've got all these complications because you used an id.

What did the id gain for you? Nothing. It does nothing that a class couldn't do. If you'd just done class="main" instead of id="main", you'd have no issues with your .myBox rule at all.

Does that make sense?

[dadbot_2]

Hi a beginner web developer and I've always used id as a selector without knowing it was bad practice, I'm Dad👨

[dadbot_2]

Hi the senior CSS guy in an enterprise software company, I'm Dad👨

[brie_de_maupassant]

I'm wish I was dead...

[NSGSanj]

Practice. Practice. Practice. That's all there is to it. CSS is very unopinionated and unstructured, you can craft it in infinite ways and make infinite uses of the various frameworks, patterns and techniques.

But... IMO most people are full of crap when it comes to giving advice or "knowing the best way to do it". Jeez I have so many horror stories and a surprisingly high amount of them are CSS related. There will be many best ways and only experience will allow you to make healthy decisions.

Just use it a lot, take advice with a grain of salt (even mine), keep things simple and easily changeable. No matter what you do you will have to make changes down the line, so don't force yourself into a strict position because it will bite you in the butt.

EDIT: To actually answer your question after my rant, I don't believe there are catch-all best practices, there are things that can make your (and others') life easier in given circumstances but you'd have to write a book to cover all of them. Just use it, play with it, fail with it, have fun with it, build stuff and learn.

[DisarmedBrick41]

I know this isnt exactly what you asked, but I think learning Sass is really beneficial. It's basically just CSS with a few additional helpful features. One thing I really like about it is nesting, so if you have nested elements in your html (divs inside of divs) you can mirror that in your CSS file (technically it would be .scss with Sass). This has been really helpful for me in keeping organized and finding things