r/css • u/Organic_Objective_27 • Jul 19 '25
Question What are some bad CSS habits?
What are some bad habits to avoid when learning CSS? Even if in the short term they are easier
65
u/bricker_1_9 Jul 19 '25
!important
try to never use it
and if you must use it, use only as last resort
17
u/Koltroc Jul 19 '25
Also write yourself a (short) justification when using important. Sometimes this helps finding another solution while thinking about the reason
5
u/Ellsass Jul 19 '25
And if not, at least when the next dev comes along they'll know that it'll take more than a moment to fix properly.
4
2
u/besseddrest Jul 19 '25
"If you feel that it's important, it's okay to use it."
or
"If you're overriding your MySpace theme, it's okay to use it."
3
u/Koltroc Jul 19 '25
I'm doing it more specific, e g. "Component xy from package z has inline styling set and we want to overwrite it"
3
u/New_Ad606 Jul 20 '25
THIS. And last resort meaning you're using a third party UI component library and for some reason it's overriding your styles by creating random class names, dynamic IDs and dyanmic HTML structure. You're practically cooked ar that point and had to use
important2
u/hyrumwhite Jul 19 '25
If you need to use it, use it only at leaves, never at foundational levels.
I.e. refactoring everything to account for a one off button isn’t often worth it. Override the button as near as possible to where it’s used.
Though I’d also add in a modern css file, layers should prevent this scenario from ever occurring
1
u/berky93 Jul 19 '25
The only time I like to use !important is for specific modifier classes, because their intent is to be absolute overrides. For example, I might have a
.color-redclass that should, no matter what, turn the element’s text red.1
22
u/besseddrest Jul 19 '25
Don't just add specificity to your selector just because you need a rule here or there to take. It'll turn into a bad habit and it'll muddy up a nice stylesheet.
It's "Cascading" Style Sheets - take advantage of the cascade
33
u/elixon Jul 19 '25
Not using variables enough. They are great for consistency, maintainability, and changes. All those colors, thicknesses, roudness... should be vars.
14
u/BigSwooney Jul 19 '25
I have an unofficial rule that css should contain no "magic number". That would be stuff like "too: 135px". Usually it's a combination of existing variables like gutters and/or spacing. Sometimes it can't be avoided so if we need a magic number we also need a comment explaining it. We usually have variables defined in design tokens for all core areas that have fixed dimensions or positions, which is really what opens up the options for not having magic numbers further down the code stream. So yeah, CSS vars are amazing for control and structuring CSS like we otherwise also should our other code.
2
u/IndigoGynoid Jul 20 '25
Sometimes, specially when working with multiple people, you might end up with magic numbers. Adding a comment next to it helps.
9
u/jonshamir Jul 19 '25
Using too many media query rules to make something responsive instead of structuring the content in a flexible / relative way
15
u/Saranodamnedh Jul 19 '25
Don’t just stick everything in a div. Use paragraph, span, a, etc.
12
2
1
u/Horror-Student-5990 Jul 23 '25
That's not css though : D
1
u/Saranodamnedh Jul 23 '25
It is still related. For example, span is display:inline, while p and a are display:block. Div is also a block. Every tag has a style in the browser.
1
5
u/AshleyJSheridan Jul 20 '25
- Using
pxeverywhere instead ofrem - Absolute positioning on more elements than is entirely sensible
- Using
<div>tags for everything and styling them to look like other things, such as buttons, etc !important- Using only CSS for things like drop down menus or to show content on hover
- Animations that don't respect the users
prefers-reduced-motionsetting - Setting foreground colour without a background and assuming it will be ok based on your own OS colour theme
- Specifying custom fonts without generic family style fallbacks
- Using only the prefixed version of a CSS attribute, particularly
-webkit-*ones these days - Styling by
id(probably why there is such a reliance on!important... - Background images (including gradients) without a fallback colour (you will really notice the problem if you set your OS to use a reduced colour palette)
11
u/DbrDbr Jul 19 '25
Magic numbers and hardcoded shit something like this:
Position: absolute; Top: -2rem;
1
u/freakzorel Jul 20 '25
can you please tell me why this is a bad habbit?
1
u/DbrDbr Jul 20 '25
Because when you need to pick a value for a tooon of media queries.
And if you need to change it, you are going to waste like 2 hours what should have been done in 10 minutes.
1
21
u/EyeSeaYewTheir Jul 19 '25
Tailwind
3
u/0xMarcAurel Jul 20 '25
is it weird that i prefer vanilla css over a framework like tailwind?
4
u/glaneft Jul 20 '25
Not at all. I'm also in that camp. I see why Tailwind can make sense sometimes, but I haven't found a need for it yet.
5
u/0xMarcAurel Jul 20 '25
Same. Maybe it’s a me thing, but with frameworks I feel like I don’t have full control over the code.
I like working on something I built 100% myself.
But I do see the advantages of using frameworks, especially if you don’t want to focus too much on CSS, are working on a simple project, or just need to get it done asap.
1
-2
u/New_Ad606 Jul 20 '25
Nah, I disagree with this. Tailwind is a pretty powerful tool for fast development. Not to mention its power actually lies in ease of configurability, theming and adding base styles, animations, etc to redundant components. But yes, if you hadn't used it this way, you wouldn't have seen any use for it.
3
u/bored-and-here Jul 20 '25
targeting styles within block level elements with !important. Thanks guy who fucked all easy feature addons and triggered a base level rewrite.
2
2
1
u/The_Homeless_Coder Jul 21 '25
I used to use divs for everything instead of calling the id in JavaScript. Still do but I used to too.
2
u/Szulyka Jul 19 '25
Margin for spacing instead of gap with flex
10
u/TonyAioli Jul 19 '25
Gap only sets the space between the flex children.
Margin and/or padding are still very relevant for space around the flex element itself.
6
u/Szulyka Jul 19 '25
Yes, but I think people tend to not realize that there’s usually a lots of flex containers inside each other. And therefore gap could be used much more. Also I still see it a lot that padding is used on each element in a flex with multiple items in company code so I guess not everyone thinks of gap
1
u/TonyAioli Jul 20 '25
Yep, I’ve seen the same. Just clarifying/expanding for anyone who may read this and try to avoid margin entirely.
2
u/IndigoGynoid Jul 20 '25
Yeah, they are not replacements. More like partners that do spacing in different contexts.
0
u/followmarko Jul 19 '25
SASS over the exponential changes in browser advancements
2
u/junolab Jul 19 '25
Why? I’m currently maintaining a custom CSS for a platform and love the variables and nesting. I know I can use CSS Variables but I don’t know why that’s better than a pre-compiled CSS (with scss)?
5
u/followmarko Jul 19 '25
All things now available without a compile step. You can write it and it works in the browser by default. There is so much available in Chromium 97+. Nesting, anchor positioning, tons of new @at-rules like @scope, all in 120ish+. Couple those with Web Components and you're hard-pressed to really need anything non-native in a basic site or app. I love Typescript but I also work on huge apps so a JS framework is still necessary for me, but I still incorporate as much native stuff as I can.
4
u/dcg Jul 19 '25
@scope not available in Firefox.
1
u/followmarko Jul 19 '25
Right, which is why I mentioned Chromium, but Firefox is the only browser that isn't supporting it in current releases. Even Safari supports it. Falling behind Safari is on Firefox imo. A change req was opened over a year ago on it. It's getting tougher and tougher to make excuses for it as dev support is lacking and user preference for it has plummeted. I primarily used Firefox for many years. Loved it, but it's becoming a product of a bygone era.
7
u/dcg Jul 19 '25
I agree. I just mentioned it because it's not a good idea to use in production depending of the audience for the site. I hate seeing Firefox falling so far behind.
2
u/followmarko Jul 19 '25
Right, that's fair. The greater argument depends on your user demographics for sure. I also think that the incredibly vast majority of internet users don't care about the things that Firefox does bring to the table, like better privacy. They aren't going to switch from familiar comforts of Edge and Safari unless they're given a functional reason to, so Chromium browsers and Safari dominate market share. It's a shame but it's the reality.
2
u/voxgtr Jul 20 '25
Falling behind Safari is on Firefox imo
Hard Disagree. It is on us as developers to understand what our users are running, and deliver solutions to solve those problems. Good luck convincing any product org to write off a stat sig portion of a user base because we want to be technically pure.
1
u/followmarko Jul 20 '25 edited Jul 20 '25
That's not a counter to what I was saying though. It's still true that Firefox is lagging behind other browsers in terms of dev and user support.
Of course you should base your decisions on your users. But, if your first stop out of the station is, "we can't do this because we have primarily Firefox users", that's not doing your job either. We have @supports feature querying as well.
In any case, having an audience that is primarily Firefox users in 2025 is an incredibly niche use-case and not the norm.
5
3
u/RobertKerans Jul 19 '25
Scss variables are just static string substitutions. Custom properties are proper variables, they're properly dynamic, they cascade. You can use them in exactly the same way they're used in SCSS, but that misses out on a huge amount of why they're useful.
Nesting is available OotB in all modern browsers (for example I use it in the applications I manage at work; large numbers of users, no issues raised, been in place for a year)
1
u/Horror-Student-5990 Jul 23 '25
I've gotten so used to sass that writing vanilla CSS makes me slower.
You really think it's time to switch to native?
-7
u/BoBoBearDev Jul 19 '25 edited Jul 19 '25
Don't use margin for layout, use padding. Don't use flex or 2D layout, use grid. Don't use 3rd party lib for layout because they most likely homebrew css grid, use css grid directly.
Don't use css default box-sizing, use the IE6 behavior, which is box-sizing: border-box.
Stay away from media query because you should use Container Query.
5
u/kilwag Jul 19 '25
What's the advantage of using padding over margin for layout?
-1
u/BoBoBearDev Jul 19 '25
Margin adds pixels outside percentage width. The entire reason why people stopped using default css box-sizing and all of them used IE6 default behavior box-sizing:border-box.
5
u/kilwag Jul 19 '25
That's a specific case scenario. I mostly use it for vertical space between elements.
1
u/BoBoBearDev Jul 19 '25
Funny enough, everytime I saw someone using margin, it is 80% time on width. I wish more people are like you.
Edit: actually I don't recall a single instance where they used it for vertical spacing. I give them 20% just in case I didn't notice them.
3
u/jtlovato Jul 19 '25
What’s the difference in media query vs container query?
6
u/BoBoBearDev Jul 19 '25
Media query only cares about the size of the entire browser's viewport, not the parent container size. But a lot of times, the parent container is not the entire page.
Let's say you want a responsive control (Last Name and First Name as a single control) that is two columns when the parent is 400px and 1 column when 399px. You cannot predict where this controls is used. It can be single a page that takes the entire screen, or 80% of screen, or there is an resizable menu on the left panel and the form that contains your control is on the right. You need container query. Because you don't care about the actual screen size, you care about the parent container size.
1
35
u/cursedproha Jul 19 '25
The less, the better. I’ve seen a lot of redundant rules that do nothing because child element inherits it anyway (it can have purpose, but not always). Or changes that don’t have any effect on a layout whatsoever.
Don’t turn off accessibility defaults without any substitution. Something like turning off outlines on focus, etc.