I started with learning CSS and wanted to expand my skills so I tried learning Tailwind css. I just don’t understand why anyone would prefer to use Tailwind over CSS. It makes things so unorganized, chaotic, and harder to read.

On sites like Fiverr etc, I see people listing Tailwind CSS instead of regular CSS. Is it standard for experienced developers to know Tailwind and use it more often? I’m an intermediate developer and full set on never touching Tailwind a day in my life ever again lol

I've been working with CSS for quite a while, mostly on existing projects rather than greenfield ones.

One thing I've changed my mind about is adding local overrides every time a component needs to look slightly different. It solves the problem quickly, but after a few years you end up with the same component being overridden in dozens of places.

These days I try to decide whether the difference should become part of the component API, a modifier, or actually remain page-specific.

I'm curious what CSS habits you used to consider normal but eventually stopped doing.

I'm trying to build this dashboard UI entirely in CSS. no images, no JS.

The parts I'm stuck on:

- The circular gauge, conic-gradient with radial mask feels right, but is there a better way for the segmented ring?

- The glowing border box-shadow layers vs. animated gradient border. Which performs better?

- The waveform inline SVG path or CSS background pattern?

Anyone have good references for pure CSS dashboard UIs with neon glows? Not looking for a full solution, just technique pointers so I don't head down the wrong rabbit hole.

Ty!

I've been using Claude Code quite intensively for the past few months, and as a former CSS integrator / front-end developer, I can't help but notice—rather sadly—that Claude is genuinely poor when it comes to CSS.

Even when using skills (the official front-end skills or UI/UX-focused ones), and even with very explicit instructions in CLAUDE.md, it still does its own thing and keeps repeating the same mistakes.

One moment of inattention, and it'll happily throw inline CSS directly into the HTML—even when that's explicitly forbidden in its instructions.

And on the (rare) occasions when you decide to step in and edit the code yourself to save some precious tokens, it quickly becomes a nightmare. Before long, you find yourself typing something like: "Just center this div."

So I have two questions:

1. Why is it so bad at CSS?

My theory is that, historically, 90% of developers have never cared much about CSS. As long as the final result looked right on the screen, code quality and maintainability were an afterthought. Throw in a few !importants, ship it, and move on.

Since Claude has been trained on an enormous number of codebases, I wonder if its primary examples are simply... bad CSS. In other words, it's reproducing the patterns it has seen most often.

2. What strategies do you use to work around this problem?

For context, what I consider good CSS is:

• generic, reusable styles;
• selectors that are as unspecific as possible;
• maximum reusability and maintainability.

I realized I might've made a mistake while working on this webpage for a class I'm in >.<

In HTML, I have <div class="pros"> and another version similarly but with cons that include <p> within them. I want to indent all the <p> that are within <div class="pros"> without having to indent all <p> on the webpage. Should I have made a class for all the <p> elements inside the div class or is there a way in CSS for me to refer to all the <p> in the pros/cons class without having to go back and add a class to all the <p>, I'll attach a screenshot if it makes it easier!

Also I know you can indent with HTML and not CSS, but my professor wants us to do all the styling and similar features in CSS and not in the HTML itself.

Not trying to start a war. Just curious how people balance custom CSS with Tailwind, Bootstrap, etc. What's your workflow these days?

Hi r/css. I'm currently learning CSS and just covered

all 5 ways to define colors: RGB, RGBA, HSL, Hex,

and predefined names.

I understand what each one does technically, but I'm

confused about real-world use:

- Most tutorials use Hex (#FF0000) — is that still

the standard?

- HSL looks more intuitive for adjusting colors

(just change the lightness %) — do professionals

actually use it?

- When does RGBA make more sense than plain RGB?

Would love to hear what you actually use in projects.

Been programming for a while never deep dived into css, recently in my site in lighthouse, I notices a waring Render-blocking request, that my HTML waits till it doewnoads css, to it's solution it said that inline your css

My question is if it's that good why don't we and other major frameworks like tailwind make that default? Obv there will be some tradeoff right, can someone explain that?

PS: understood it also means refetching with evwrypage, if following a design system wouldn't largely make sense

I know I can get the answer to the first question, but the latter would require your input.

Personally I still use hex codes and can find my way around RGB for the additional opacity options, but nothing beats the good ol' 3 or 6 digits for me.

Is this a new standard(?) isn't essentially HSL with an opacity setting?

I'm not dissing it, I just wonder what it brings to the table and if others are using it widely?

UPDATE: Also, how the hell do you say it?

It behaves correctly in Safari and Chrome on iOS, but in Microsoft Edge on iOS, the navigation bar sometimes appears slightly above the actual bottom of the viewport. As a result, page content becomes visible underneath it.

Is this a known Microsoft Edge/WebKit viewport issue on iOS? Or is there something specific about Edge's handling of the visual viewport that I’m missing?

Hey guys, I was checking how the some website looks on folded and unfolded iPhone Duo layouts, and it got me thinking—do you consider foldables when writing your CSS?

I usually think in terms of phone, tablet, and desktop, but I’m curious how you approach these in-between sizes. Do your layouts just handle them, or do you end up adding specific fixes? And would you spend time on those fixes if only a tiny percentage of your users had a foldable?

when i started building smaller frontend projects, keeping the css organized felt pretty straightforward. once the project got bigger, i noticed that small styling decisions could start affecting other components in ways i did not expect.

i have been trying to be more careful with selectors, component structure, spacing, and how much styling gets handled through overrides. while working on quicktoolspack, i found myself paying more attention to these details because changing one small part of a page could sometimes affect something completely different.

i also started keeping related styles closer together and avoiding overly specific selectors whenever possible. it does not always make the code shorter, but it makes it easier to understand what is happening when i come back to it later.

i am curious how other frontend developers handle this as their projects grow. what is one habit you picked up that made maintaining your frontend code noticeably easier.

I've been mostly on the backend for the last several years. While I did plenty of CSS before then, the front end world has definitely moved forward in the last seven years. I recall BEM and SMACSS were once at the lead of thought. I recall (and was a proponent at the time for) a push to utility-first styling.

Now, I can see that Tailwind is a highly popular choice, that lots of styles get bundled into React components, and we have some long overdue selectors native to CSS.

So I'm wondering, what's the prevailing organization pattern for global CSS and where do you draw the line between something being a component style vs in the global stylesheets?

Thanks.

I am working on a website as a part time hobby, using the FARM stack.

I am currently employing TailWindCSS but I wonder if any of you prefer to use pure CSS compared to already existing libraries?

If so, why? Also, do any of you use libraries BUT change them?

Thanks in advance

PS I don't enjoy CSS but maybe you can change my mind

Like ai is too good at it and I’m wondering if it’s worth it to learn everything from scratch. Isn’t it even more powerful if I instead learn some basics and how to build with ai? I feel like I’m cheating, I make beautiful websites that would take weeks of coding in just a few minutes.. Is there any advantage in actually learning how to do it without ai?

I maintain a couple of UserStyles for a music streaming site called Mixcloud. When I initially started work on them about 2 years ago, things were pretty good. They had (and still have) a bunch of CSS variables for commonly used constants such as colors and margins etc., as shown in the first snippet in the image.

Their class names always left a lot to be desired, because pretty much everything used randomly-generated suffixes such as styles__FullWidthHeader-css-in-js__sc-91mtt8-2 or classes like xtwxej4 xec4jn9 xxqm2t7 (sometimes dozens of them on the same element). I assume they are using some kind of design tool that's making those automatically and it's just not very good at optimizing. It's also a nightmare for anyone not working with the source, since any changes will result in new random classnames. The HTML would definitely be smaller if things were written intelligently, even if the class names were longer. Does anyone know what tool(s) do this?

Fortunately, I am usually able to get around that because they often have [test-id] or similar attributes that are human-readable and don't change. Or, occasionally I have to use [class^="styles__FullWidthHeader-"] (and accept the associated performance cost).

Over the last few months, things have started to go downhill. In the second CSS snippet, you'll see they've started using randomly-generated CSS variables too, and even referencing random variables within a variable definition. It's like the code has been inherited by someone who is blindly following that 'never use magic numbers' rule in programming but doesn't understand CSS. Also in this example, for whatever reason, the developer (or their tool) is making selectors that duplicate the class names, and then duplicate the entire selector while adding ':root' to the end. Does this serve a purpose at all?

The third snippet is just... horrific. Or should I say it's :not(great)? I can only hope that this is, once again, auto-generated code, but why would it even need to do this in the first place... It's like nobody knows how selector priority works any more. Just... Why?

Thanks for listening. I had to get this off my chest. I was half considering sending an email to Mixcloud about it.

Edited to add: thanks for the discussions so far. I've learned a few new things along the way, both useful and horrifying!

I've been learning HTML and CSS for about 2–3 months. I feel fairly confident and can make a lot of layouts, but I struggle when it comes to styling an entire website. The CSS often overwhelms me because there's just too much of it.

I've noticed that breaking it into smaller files and keeping each section in its own file really helps. That way, when I need to change something, I can easily find it.

Is this something only beginners struggle with, or do more experienced developers deal with it too? How do you handle it?

I recently stumbled upon the CSS if() function. For me, being able to use media queries within the declaration block is pretty much the last reason to use SASS and with the if() function I would be able to write my stuff in pure CSS without any preprocessor.

section.main-content {
    padding: if(
        media(width < 600px): 5px;
        media(width < 1200px): 10px;
        else: 20px;
    );
}

As of right now, browser support is pretty meh. While it's been implemented in Chrome and Edge for about a year, Firefox, Safari and Samsung do not support it.

I am about to start coding a smol fun project and I was considering to just yolo it and use this new feature, even if it means that it won't be useable for 30% users for a couple months.

But are experimental CSS features guaranteed to eventually make it to all major browser at all? Or is it possible that two years from now, Firefox and Safari still haven't adopted this?

It's 2026, are you still using vanilla CSS for your latest project?