CSS rules

Why

Webflow's Style panel has a separate box for the top, right, bottom and left margin. Given margin: 20px 0, the converter has to unpack it and guess which value belongs where — and with trickier properties like border, background or font it guesses wrong or drops parts. Written longhand, there is nothing to guess.

Think of it like

A form with separate boxes for street, city and postcode. Write the whole address on one line and the clerk has to split it up for you. Fill in each box and it is simply copied across.

margin: 20px 0;
border: 1px solid #ccc;

margin-top: 20px;
margin-bottom: 20px;
border-width: 1px;
border-style: solid;
border-color: #ccc;

The common ones, and what they become:

Why

In Webflow all CSS lives together for the whole site. A rule written as body { font-size: 18px } inside one section would quietly change the text size on every page. Keeping each rule tied to its section means a section can only ever change itself.

Think of it like

Painting your own flat versus painting the whole apartment building. Your neighbours did not ask for your colour.

* { box-sizing: border-box; }
body { background-color: #111; }

.pricing { background-color: #111; }
.pricing__card { box-sizing: border-box; }

Why

Webflow's Designer only shows real elements. Something created by ::before never appears in its Navigator, so a designer cannot select it, move it or change it — they can only wonder where that line is coming from.

Think of it like

Invisible furniture. Everyone can see the lamp in the room, but nobody can find it to move it.

.hero__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
}

<!-- HTML -->
<h1 class="hero__title">…</h1>
<span class="hero__rule" aria-hidden="true"></span>

Hover and focus effects are different: :hover and :focus-visible (one colon) are states of a real element, not invented elements, and are fully allowed.

Why

Webflow's grid editor builds its grid from both numbers. Given only columns, it fills in the rows with its own default, and the layout in the Designer no longer matches the one you built.

Think of it like

Ordering a table for a spreadsheet by saying “three columns” and nothing else. You get three columns — and however many rows the shop felt like.

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

Why

Webflow has exactly these viewports and nothing in between. A style written for, say, 900 px has no slot to go into, so it is lost on import and the section looks broken on tablets.

Think of it like

Clothing sizes. A shop stocks S, M and L. Ask for size 37.5 and you walk out with nothing.

@media (max-width: 767px) {
  .features__grid {
    grid-template-columns: 1fr;
  }
}

More in Breakpoints.

Why

Without a change on hover, people are not sure something can be clicked. Without a focus style, people who cannot use a mouse have no idea where they are on the page — for them, the page is unusable.

Think of it like

A lift button that lights up when you press it. It works without the light, but everyone presses it three times.

.hero__cta {
  background-color: #111;
  transition-property: background-color;
  transition-duration: 0.2s;
}
.hero__cta:hover { background-color: #333; }
.hero__cta:focus-visible { box-shadow: 0 0 0 2px #111; }

Why

Webflow draws its own blue outline around whatever the designer has selected on the canvas. A section that sets its own outline fights that, and the designer can no longer tell what is selected. A box-shadow looks the same to visitors, follows rounded corners, and leaves Webflow's outline alone.

Think of it like

Two people highlighting the same page with the same yellow marker. You can no longer tell who marked what.

Why

An <img> is something a designer can click and replace in Webflow. A background image is tucked inside a style setting, where it is easy to miss. The full explanation and an example are in HTML rules.

Think of it like

A framed photo on the wall versus a photo printed into the wallpaper.

Why

Webflow's Designer shows your CSS but does not run your scripts. Hidden in CSS, the element is invisible in the Designer too — the designer opens the page and finds empty space. See JavaScript rules for how it is done instead.

Think of it like

A theatre curtain sewn shut. The audience was meant to see it open — but now even the stage crew rehearsing cannot see the stage.

Why

If a designer or a visitor changes the base text size, everything written in rem grows and shrinks with it in proportion. Fixed pixels ignore the change.

Think of it like

A recipe written as “two parts flour to one part sugar” instead of grams. Make a bigger cake and the proportions still work.