At what point do you stop patching CSS and just rebuild properly?

I would suggest using classes, and the cascading effect of CSS.

	.button {
       background-color: grey;
	   color: black;
       font-size: 16px;
       padding: 4px;	
    }

	.button-sm {
		width: 20px;
	}

   .button-md {
		width: 40px;
	}

I always using separate css file for each component such section, sidebar, button, card, header etc and use class based just like @tray2 mentioned. This way, I know where to patch if something break.

yeah that actually makes sense, I think one of my main issues is I didn’t structure anything from the start

everything was built section by section so even when I used classes, they ended up getting redefined in different places instead of reused properly

the separate css per component idea sounds way cleaner compared to what I’ve done

curious though — when you’re dealing with something that’s already messy like this, do you usually try to reorganize it gradually or just rebuild with a proper structure?

because right now it feels like fixing one part just creates problems somewhere else

If its me. I'll create one style (e.g button) and apply it per page and see which one should be treated difference. This takes some time and often too overhelming.

yeah that actually sounds like what I should’ve done from the start instead of redefining things everywhere

I think part of the problem now is I don’t even know what my “base” styles are anymore because everything got slightly modified over time

like even buttons or cards look similar but aren’t actually using the same structure underneath

did you ever run into a point where it just becomes easier to rebuild instead of trying to standardize something that’s already all over the place?

yeah that makes sense, I think what’s messing me up right now is that I don’t really have a clear “source of truth” anymore

like I’ll try to fix one section (say buttons), but then I realize there are like 4 slightly different versions of the same thing across the page

so even if I standardize one, I’m not sure if I’m actually fixing the system or just creating another variation again

right now I’m leaning toward slowly extracting patterns instead of touching everything at once

like:

• rebuild one clean button component
• then replace old ones gradually
• same for cards / sections

but it still feels a bit risky because everything is kind of interconnected

did you ever try isolating styles first (like resetting or removing overrides) before rebuilding components, or do you usually just start fresh inside the existing mess?

@muhammadali2003 This is why you don’t cut corners: “quick fixes” end up sticking around for much, much longer than intended, and the work to undo them becomes bigger than just doing things properly from the start.

I’ve not worked with WordPress for a few years now, but I’d start by extracting styles for components one-by-one into your theme.css file if you’re building an “old-style” theme. I can’t remember how styles work in block-based themes but again, just extract styles for one component at a time.

yeah that hits hard tbh 😅

I think that’s exactly what happened here — I kept doing “quick fixes” thinking I’ll clean it later, and now I’m basically paying for it

extracting component styles into a single place makes sense though, I guess right now everything is kind of scattered so even identifying what belongs to a “component” is part of the problem

like a button might have base styles in one place, hover somewhere else, and spacing overrides inside a section

I’m starting to realize I probably need to define a clean version of each component first and then slowly replace the old ones instead of trying to fix everything in place

did you ever go as far as doing a partial reset (like stripping a section back to almost raw styles) just to rebuild it clean, or do you usually refactor on top of what’s already there?