# Why Page Builders Ruin Custom HTML Designs (And How Zero-Wrapper Block Conversion Fixes It)

Every front-end developer who has tried to bring a custom HTML/CSS mockup into WordPress has experienced the same quiet heartbreak. In the browser, the static HTML file looks razor-sharp. Ten minutes after moving it into a page builder or block converter, the navigation height is off by 6 pixels, the pricing table borders have vanished, a CSS Grid has collapsed into a single column, and half the inline SVGs refuse to scale.

Why does that happen—even when you copy the exact same CSS file into WordPress? The answer lies in **DOM wrapper pollution** and **cascade order**.

## 1. How Extra Wrappers Break Modern CSS

Modern CSS relies heavily on parent-child relationships: Flexbox, CSS Grid, direct child combinators (`>`), and adjacent sibling combinators (`+`). Consider a simple rule from a designer’s stylesheet:

```
body > header + main > .pricing-grid > article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
```

Look at what happens in a typical WordPress theme or page builder:

- Full Site Editing wraps the page in `<div class="wp-site-blocks">`, wraps the header in `<header class="wp-block-template-part"><header>...`, and wraps the body in `<div class="entry-content wp-block-post-content">`. Now `body > header + main` never matches.
- A page builder wraps every widget in 3 to 5 layers of `.elementor-widget-container` or `.et_pb_module` divs. Direct CSS Grid and Flex items cease to be children of the grid container.
- WordPress’s own `core/table` block wraps every `<table>` in a `<figure class="wp-block-table">`, breaking `.pricing > table`.

## 2. How Kerf Keeps the Same DOM

When we engineered [Kerf](https://kerf.site/), we set a strict benchmark: *success is not “does it look close,” but “is the rendered DOM the same DOM?”*

- **Unwrapped document chrome:** Kerf unwraps `core/template-part` and `core/post-content` at render time and copies your mockup’s `<html>` and `<body>` classes and `data-*` attributes onto the real document tags.
- **`kerf/div` renders one element with one set of attributes:** A `<section class="hero">` becomes a block that renders `<section class="hero">`. A `<td>` renders a `<td>`. Nothing is normalized or wrapped.
- **Additive-only core blocks:** Headings (`core/heading`) and paragraphs (`core/paragraph`) use native WordPress blocks so you get rich text editing and Yoast/Rank Math compatibility without inserting wrapper elements.
- **Case-accurate inline SVG:** PHP’s `DOMDocument::loadHTML()` normally lowercases `viewBox` to `viewbox` and `linearGradient` to `lineargradient`, breaking SVG scaling. Kerf restores canonical SVG camelCase and sanitizes against a strict DOM allowlist.

## 3. Proving It: Pixel-by-Pixel Image Subtraction

On the [Kerf home page](https://kerf.site/#proof), we show the Copperline Studio template opened as a static HTML file on the left and rendered by WordPress after a one-click Kerf import on the right. When you blend the two 1440×900 screenshots with CSS `mix-blend-mode: difference`, identical pixels subtract to pure black (`#000000`).

Copperline Studio on WordPress — 134/134 selectors matched

![Copperline Studio running live on WordPress after a one-click import with Kerf](https://kerf.site/assets/img/copperline-wordpress.jpg)

*The rendered WordPress page keeps every tag, class, stylesheet, and script in source order.*

Want to test how your most complex stylesheet holds up? Launch the [live WordPress Playground demo](https://kerf.site/demo/) and drop in your ZIP to see your selector match score in seconds.

---

*Originally published on [kerf.site](https://kerf.site/blog/why-page-builders-break-custom-designs/). Try Kerf free in your browser — a private WordPress with Kerf installed, no sign-up: https://kerf.site/demo/*