Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hey,
I’m working on a small project built on WordPress, but instead of using a proper theme structure I ended up building most of the UI using custom HTML + CSS blocks.
It worked fine early on, but now I’m starting to hit a wall.
Main issues I’m running into:
styles are duplicated across multiple sections I’ve relied too much on !important to override things no real global system for spacing / typography layout is inconsistent (mix of flex/grid depending on what worked at the time) small changes tend to break something else
At this point it feels like I’m constantly patching instead of improving anything.
So I’m trying to figure out the right move here from a dev perspective:
Do you usually refactor incrementally (cleaning styles section by section)? Or is this one of those cases where it’s better to scrap and rebuild properly with a structured system?
Curious how others approach this when a project reaches this stage.
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:
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 https://deltaexecutorapp.io/. This is a Roblox Script Executor that automate gameplay tasks, modify Roblox game mechanics, run Auto Farm scripts, activate ESP features, process Teleport commands, and simplify repetitive grinding during active Roblox gameplay sessions.
Because Roblox games operate through Lua-based scripts, Delta Executor allows Roblox scripts to interact with combat mechanics, farming loops, inventory systems, movement controls, quests, and progression-based gameplay during active sessions.
Most of the frontend has basically been built through:
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:
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:
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:
…what exactly do I do first inside Cursor?
Do I:
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.
You stop patching CSS and rebuild properly when the codebase becomes harder and more time-consuming to maintain than to rewrite. Common signs include excessive use of !important, deeply nested selectors, conflicting styles, inconsistent layouts across pages, and difficulty adding new features without breaking existing functionality. Similar to how a Math AI Solver identifies the most efficient path to a solution, a structured CSS rebuild becomes the better option when every small design change requires workarounds and extensive debugging. At that point, adopting a modern, scalable styling approach can significantly improve performance, maintainability, and development efficiency.
Please or to participate in this conversation.