What breaks when you redesign an existing website
Changing the look of a brand-new site is easy. Changing the look of a site that has been live for years, with plugins, third-party widgets, custom scripts and a checkout, is a different job. The design is tangled up with behaviour, and a "purely visual" change can quietly switch a feature off.
This article lists 16 things that commonly break when you change the look and feel of an existing, complex website. Each one comes with a small code example that shows the problem, and a short note on how to avoid it. Use it as a checklist before your next redesign goes live.
Contents
- Renamed or removed classes and ids
- New wrapper elements
- Fighting inline styles set by scripts
- State classes that lose to new rules
- Background images that disappear
- Text that becomes invisible
- A fixed header that covers content
- Clipped dropdowns and tooltips
- Modals trapped by a transform
- Decorative layers that swallow clicks
- Sliders that measure the old sizes
- Global rules leaking into widgets
- Content loaded later misses the effects
- New fonts, translations and RTL
- Keyboard focus that vanishes
- Desktop-only thinking
1. Renamed or removed classes and ids
Class names and ids are not only for styling. Scripts, plugins, analytics tags and automated tests use them to find elements. A redesign that "cleans up" the markup can rename a class that some forgotten script depends on.
<!-- Before -->
<button class="add-to-cart" data-id="42">Add to cart</button>
<!-- After the redesign -->
<button class="btn btn-primary" data-id="42">Add to cart</button>
// Existing script, untouched, now finds nothing.
// No error is shown: the button simply does nothing.
document.querySelectorAll('.add-to-cart').forEach(btn =>
btn.addEventListener('click', () => addToCart(btn.dataset.id)));Avoid it: keep every existing class and id. Add new styles to the selectors that are already there instead of renaming them.
2. New wrapper elements
New designs often need extra <div>s for layout. But existing CSS and JavaScript may rely on the exact parent-child structure, through child selectors (>), :first-child, or DOM traversal such as parentElement.
<ul class="menu">
<div class="menu-row"> <!-- new wrapper (also invalid inside a <ul>) -->
<li><a href="/shop">Shop</a></li>
</div>
</ul>
/* Old CSS: no longer matches, the <li> is not a direct child */
.menu > li { display: inline-block; }
// Old JS: parentElement is now the wrapper, not the <ul>
link.parentElement.parentElement.classList.add('open');Avoid it: don't add, remove or move elements. Modern CSS (grid, flexbox, order, pseudo-elements) can change a layout a lot without touching the structure.
3. Fighting inline styles set by scripts
Menus, accordions, sliders and popups often show and hide things by writing inline styles from JavaScript. A new rule with !important beats those inline styles, and the feature stops working.
// Existing script toggles the dropdown with an inline style
toggle.onclick = () => {
submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
};
/* New design wants a flex dropdown. Now the menu is always open. */
.submenu { display: flex !important; }Avoid it: find out which properties the site's scripts and inline styles control, and leave those properties alone. Style the rest.
4. State classes that lose to new rules
Many sites use small "state" classes such as .is-hidden, .active or .disabled. A new rule that is more specific, or simply comes later in the cascade, can override them.
/* Existing state class */
.is-hidden { display: none; }
/* New design rule: more specific, so it wins */
.products .card { display: flex; }<!-- A filtered-out product the script has hidden... now visible again -->
<div class="card is-hidden">Out of stock item</div>Avoid it: list the state classes the site uses and check that each one still has its effect on top of the new styles.
5. Background images that disappear
The background shorthand resets every background property it doesn't mention, including background-image. A "simple color change" can wipe out a hero photo or a product image that a CMS set inline.
<section class="hero" style="background-image: url(team.jpg)">...</section>
/* Meant as a color tweak; with !important it also removes the photo */
.hero { background: #101828 !important; }
/* Safer: only change what you mean to change */
.hero { background-color: #101828; }Avoid it: use the specific properties (background-color, background-size) and keep existing background images.
6. Text that becomes invisible
Two common ways to lose content: a new text color that is too close to an inherited background, and "fade-in" effects that hide content until a script shows it. If the script fails, runs late, or is blocked, the content stays hidden.
/* Hidden by default, waiting for JS to add .visible */
.card { opacity: 0; transition: opacity .6s; }
.card.visible { opacity: 1; }
/* Safer: only hide when the script has confirmed it is running */
.js-ready .card:not(.visible) { opacity: 0; }Avoid it: content must be visible without the effect. Check contrast for every text color against its real background (WCAG recommends at least 4.5:1 for normal text).
7. A fixed header that covers content
A sticky or fixed header looks modern, but position: fixed takes the header out of the page flow. The top of the content slides underneath it, and in-page links (#section) scroll their target behind the header.
.site-header { position: fixed; top: 0; width: 100%; height: 72px; }
/* Without these, the first heading and every #anchor target hide under it */
body { padding-top: 72px; }
html { scroll-padding-top: 80px; }Avoid it: reserve the header's space, and test anchor links, skip links and pages with a notice bar above the header.
8. Clipped dropdowns and tooltips
Rounded corners and neat card edges often come with overflow: hidden. Any dropdown, tooltip or autocomplete list that is positioned outside that box gets cut off.
/* Added for rounded corners on the header */
.site-header { border-radius: 16px; overflow: hidden; }
/* The existing dropdown hangs below the header... and is now cut off */
.site-header .submenu { position: absolute; top: 100%; }Avoid it: round the corners without overflow: hidden on any box that contains a dropdown, tooltip or popup, and open every menu after the change.
9. Modals trapped by a transform
This one surprises even experienced developers. When an element gets a transform, filter or perspective (popular for hover and 3D effects), it becomes the reference box for its position: fixed descendants. A modal or cookie banner inside it stops covering the screen and scrolls away with the card. It also creates a new stacking context, so z-index values inside it can no longer rise above the rest of the page.
<div class="product">
<div class="quick-view-modal">...</div> <!-- position: fixed; inset: 0; z-index: 9999 -->
</div>
/* New hover effect: the modal is now trapped inside the card */
.product:hover { transform: translateY(-4px); }Avoid it: before adding a transform or filter to an element, check that it has no fixed-position or high z-index content inside it.
10. Decorative layers that swallow clicks
Glows, gradients and shine effects are often drawn with a pseudo-element stretched over the whole element. If it sits on top, it receives the clicks instead of the links and buttons underneath.
.card { position: relative; }
.card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent);
pointer-events: none; /* without this line, the card's links stop working */
}Avoid it: give every purely decorative layer pointer-events: none, and click everything after adding effects.
11. Sliders that measure the old sizes
Carousels, masonry grids and sticky sidebars often measure elements in JavaScript. New padding, margins, borders or box-sizing change those measurements, and the slides drift out of place.
// Existing slider: assumes slides sit edge to edge
const w = slides[0].offsetWidth;
track.style.transform = `translateX(${-index * w}px)`;
/* New design adds a gap: each slide now ends 24px further along,
so every "next" lands a little more off-center */
.slide { margin-right: 24px; }Avoid it: don't change the size or spacing of elements that scripts position. Restyle what's inside them instead, and test every slide, not just the first.
12. Global rules leaking into widgets
Broad selectors such as *, img, div or button also hit embedded maps, chat widgets, payment forms and booking calendars that were never designed for them.
/* Typical "modern reset" added with the new design */
img { max-width: 100%; height: auto; }
button { border-radius: 999px; padding: 12px 24px; }
/* The map widget's tiles and the chat widget's tiny icon buttons
are images and buttons too, so they now render broken */Avoid it: scope new styles to the site's own elements (for example under a prefix such as body#new-look .content img) and leave third-party widgets alone.
13. Content loaded later misses the effects
Effects are often wired up once, when the page loads. Product lists, comments and search results that arrive later through "Load more", infinite scroll or filters don't get them.
// Runs once. Cards added by "Load more" stay plain (or, worse, invisible).
document.querySelectorAll('.card').forEach(card => observer.observe(card));
// Safer: also watch for new cards
new MutationObserver(() =>
document.querySelectorAll('.card:not(.watched)').forEach(card => {
card.classList.add('watched'); observer.observe(card);
})).observe(document.body, { childList: true, subtree: true });Avoid it: test pages after loading more items, filtering and paging, not only on first load.
14. New fonts, translations and RTL
A new font has different letter widths. Labels that fitted before can overflow fixed-height buttons, and the German or French version of the site, with longer words, overflows first. Sites in Hebrew or Arabic flip the layout, and left/right-specific rules point the wrong way.
/* Fits "Buy now" in the old font; clips "Jetzt kaufen" in the new one */
.btn { height: 40px; width: 120px; white-space: nowrap; overflow: hidden; }
/* Wrong side on right-to-left pages */
.icon { margin-right: 8px; }
/* Correct in both directions */
.icon { margin-inline-end: 8px; }Avoid it: use padding and min-height instead of fixed sizes, logical properties instead of left/right, and test the longest language the site has.
15. Keyboard focus that vanishes
The browser's focus ring is sometimes removed because it "doesn't look nice". Keyboard users then can't see where they are on the page, and forms become very hard to fill in. In many countries this is also an accessibility compliance issue.
/* Removes the only clue keyboard users have */
*:focus { outline: none; }
/* Keep a visible focus style that matches the new design */
:focus-visible { outline: 3px solid #e535d6; outline-offset: 2px; }Avoid it: restyle focus, never remove it, and tab through the menu, forms and checkout after the change.
16. Desktop-only thinking
A design reviewed only on a large screen can break on phones in two classic ways: fixed widths that cause sideways scrolling, and interactions that only work with a mouse.
/* A 1200px-wide hero makes the whole page scroll sideways on a phone */
.hero-inner { width: 1200px; }
/* Safer */
.hero-inner { width: min(1200px, 100%); }
/* Submenu that only opens on hover: touch screens have no hover */
.menu li:hover > .submenu { display: block; }Avoid it: design for mobile and desktop separately, and test on a real phone, with touch.
The pattern behind all 16
Almost every item on this list comes from one of three causes:
- Changing the structure (renaming classes, adding wrappers) that scripts and plugins depend on.
- Overriding what scripts control (inline styles, state classes, measured sizes).
- Side effects of new CSS (overflow, transforms, overlays, broad selectors, fixed positioning) on things the designer never looked at.
So the safest redesign is one that adds styles on top of the existing page, uses only selectors that already exist, and leaves alone the properties the site's scripts are using.
How AI Style Upgrade handles this
AI Style Upgrade is built around those rules. The whole new look is one stylesheet and one light script that you add at the beginning of the <body>; the existing pages are not rewritten. When the AI designs the new style:
- The HTML is never changed: no new tags or wrappers, and all class names and ids are preserved. Only existing selectors are used.
- Properties controlled by the site's JavaScript or inline styles are "locked" and not overridden, so menus, sliders and forms keep working.
- Background images are preserved, text stays visible, and the layout is checked for overlapping elements.
- Desktop and mobile are both designed for.
- Going back is easy: remove the two lines and the site looks exactly as it did before.
You still test the result, as you would with any change, but you start from a much safer place. Read more in How to modernize a client's website without rebuilding it.
Try it on your own site
Designing and testing a new style is free, so you can see the result on a live site in your browser before you decide anything.