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?

I feel like I’m stuck in a weird middle ground right now between “beginner” and “accidentally building real projects”

For context, I run a WordPress-based gaming/tools site related to Delta Executor and most of the frontend has basically been built through:

• Elementor
• custom HTML/CSS sections
• massive ChatGPT prompts
• copying/editing snippets
• tweaking spacing/fonts/buttons manually until things finally look good

At first this actually felt amazing because I could suddenly build sections that looked WAY more modern than what I could normally do myself.

For example I’ve been building:

• custom hero sections
• animated buttons
• download sections
• sticky layouts
• comparison blocks
• custom cards
• responsive mobile sections
• CTA areas
• custom CSS effects

And honestly AI helped me reach results I probably never could’ve built alone.

BUT…

now my site feels like a giant pile of patched-together sections.

I’m running into problems like:

• duplicated CSS everywhere
• random spacing systems
• inconsistent typography
• mobile layouts breaking unexpectedly
• sections looking visually disconnected
• huge HTML/CSS blocks that I barely understand anymore
• changing one thing somehow affecting another section
• no real reusable component system
• impossible-to-maintain styling

Sometimes ChatGPT gives me a beautiful section but when I paste it into WordPress it clashes with 5 other things already on the site.

That’s what got me interested in Cursor and this whole “vibe coding” workflow everyone keeps talking about.

What I still genuinely don’t understand though is HOW people actually transition into that workflow properly.

Like if I already have:

• a live WordPress site
• Elementor layouts
• custom CSS snippets
• random custom code everywhere

…what exactly do I do first inside Cursor?

Do I:

• export my theme files?
• rebuild sections one by one?
• create reusable components?
• stop using Elementor?
• keep WordPress only as a CMS?
• build frontend separately?
• use Cursor mainly for organization/refactoring?

I think what I’m REALLY trying to learn is: how do you go from “AI generated snippets pasted into WordPress” to “an actually structured scalable frontend workflow.”

Because right now I feel productive but also incredibly unprofessional at the same time.

Would genuinely love advice from people who started from a non-programming background and slowly moved into proper AI-assisted development workflows for real projects.

I need a very basic beginner level step by step instructions too what to do how to do and where exactly to navigate. I feel I might be able to progress further but I need proper guidance to how I handle these things. Above all I want to learn these things myself. I get overwhemed by these YouTube videos and tutorials etc so need proper guidance on this.