We recently released some changes to the way the Webflow selector UI works, and I’d like to dive into how the new system works and explain some of the changes that have been made (and that are upcoming in the near future).
The main goal of the new design was to prepare for some big features that will be coming in the future (a peek at one of them - nested selectors - is outlined below), as well as to address some points of confusion in the old selector system.
With that said, let’s dive into the biggest changes that we’re making…
Change #1: Removed Default Tag Styles and the “Button” class
Previously, when a new site was created, Webflow also created a list of tag selectors (e.g. All Paragraphs, All H1 Headings, etc) to make it possible to style elements without manually giving each one a class name. We used to do this because our old selector system did not let you create tag-based selectors (e.g. p { ... } in CSS) via the UI, so we preloaded some common ones by default.
Now, when you create new sites (existing sites are not affected), you’ll notice that it will start with a blank slate so that you can build up just the styles that you need for your design:
We also removed the previously-bundled “Button” class because the Button element was the only element in the Add Element panel that auto-assigned itself to a class. This was often confusing because no other element in Webflow behaved this way, so we decided to standardize that process. Now, when you drag a Button element into the canvas, it will need to be assigned a new (or existing) class in order to style it, just like every other element.
Change #2: Added the ability to create custom tag-based selectors
For elements repeat all across your site (headings, paragraphs, blockquotes, images, links, ul/ol lists, etc), it’s now possible to create site-wide “element type” style definitions by clicking on
Previously, this was only possible for headings, paragraphs, and links because we bundled these selectors with new styles (see Change #1), but now it’s expanded to most element types.
Change #3: Tag-based selectors no longer auto-select
For all tag-based selectors (those that select based on the type of node instead of the classes it has on it), Webflow will no longer auto-select them when clicking on elements in the canvas. Previously, there was a lot of confusion as many users would accidentally make changes to all paragraphs across their entire site while assuming they were only changing the selected one. With the new design, it’s now much harder to affect a lot of nodes by accident, however it does take 2 more clicks to get to that edit-all-elements-by-type option for the few times that you may need it.
So now when you select an element that doesn’t have a class attached to it, but is affected by a e.g. “All Paragraphs” style, you have to manually click into the selector menu and choose that option:
Change #4: Added default margin to H1-H6 and Paragraph tags
Previously, the CSS base stylesheet that Webflow sites included had margin: 0; styling for all headings and paragraphs, however the default tag styles included in each site overrode these to include some nice margins to make typography sections more readable.
We changed the base stylesheet to match the default styles, however the unintended result was that certain sites that had completely cleared their H1-H6 and/or Paragraph styling in the Style Tab would now see increased margins around their headings and paragraphs.
This could be a breaking change for a small number of sites (especially if you remember resetting the default heading/paragraph margins), however Webflow will now automatically migrate existing sites to account for this when you open it up in the Webflow designer and republish.
We recommend that you double check your site in the Webflow designer to verify that your headings and paragraphs are still appearing as intended without extra margins around them. This should work automatically, but please contact support@webflow.com if you’re seeing unexpected margin values applied.
Change #5: Choosing global styles from auto-suggestions shows warning
Previously, Webflow reused global classes and allowed assigning them to elements using the selector auto-suggest feature. However, this led to intricate CSS specificity/override issues that only the top expert Webflow users could figure out how to work around. Multiple global classes also led to inconsistencies in our UI, where classes would not show in the Selector area until you clicked in to edit them.
Before: Clicking on the second element incorrectly shows only the “Red Background” class, even though the element was given the “Black Border” class first and foremost.
In order to make working with global classes more obvious/explicit, we decided to guard against using global classes as modifiers unintentionally when they’re added as modifiers to elements that already have a class. These modifiers will now act as a “combo class” and will continue to inherit styles from the global class, however you’ll see a warning when when reusing a global class as a modifier.
as autocomplete suggestions when creating a nested combo class. The reasoning behind the auto-complete change is that we want to make extra sure that global classes are not reused and edited by mistake, which can unintentionally affect different parts of the site.
After: It’s clear that the second element has both “Black Border” and “Red Background” styles in the UI, and it’s possible to add a modifier to make the border thinner while still deriving border style and color from “Black Border”.)
We interrupt your regularly scheduled forum post for an Important Public Service Announcement about using global classes as modifiers:
Even though you can still use combinations of global classes in this way (by ignoring the warning), we strongly recommend that you do not reuse global classes for modifier/“combo” class names. It’s something that may be useful for very small sites, but can very quickly become a mess of CSS interdependencies and hard-to-debug specificity issues when your site gets more complicated.
_Carry on… _
Change #6: Renaming classes that collide with global class names shows warnings
Because CSS doesn’t support namespacing, CSS classes can collide just based on name. So in Webflow if you create a class called “Blue Border” and a separate one called “blue-Border”, both will end up being compiled to .blue-border { ... } in CSS. This also means that when combo modifier styles are added to a global selector, if that modifier happens to have the same compiled CSS name as another global class, that modifier style will also inherit from the global class (which why we added the warning in Change #5).
Now, when classes end up in this situation (tied by virtue of sharing the same/similar name), Webflow will show you warnings in the Style Manager when renaming classes:
Change #7: Nested Selectors (coming soon for certain elements)
If you’ve ever tried to write long-form content in Webflow before, you know it’s a pain - you currently have to copy-paste Paragraph and Heading elements over and over, and it’s really frustrating. To address that, we’ll soon be introducing a new element called a Rich Text Block, which will be a single node that you can freely type a lot of content in (similar to Medium, Microsoft Word, etc).
As part of that, we’ll be introducing nested selectors (e.g. .some-node a { ... } in CSS) for Rich Text nodes, and they’ll show up next to a “When inside of…” link to help you style elements without manually giving them classes:
We’ll have a more detailed post on this feature when it’s released 