Tips, tricks and good practices

Style the tagbefore adding classes all over the place

When designing a website or an application, some HTML elements will be repeated all over the place, such as headings, paragraphs, links, images, inputs, etc. To make sure the style of those elements is consistent over your entire project, you should apply the basic styles using the HTML tag itself as the selector instead of using a class.

Here is a list of elements for which Webflow allows you to use the HTML tag as the selector:

Every level of heading can be styled differently using only their tag, as every level has its own HTML tag: H1 through H6.

In the same fashion, you can apply basic tag styles to the text you put in Italic or in Bold inside your paragraphs or text blocks. Simply select an Italic Text element, and use its All Italics selector from the Selector dropdown, as illustrated in the example below:

If you would like to customize a few specific elements afterwards, you can simply add a class to those elements. It won't disturb or change the way the elements without that class are displayed.

reuse your classesand build them with that goal in mind

Reusable classes is one of the basic concepts of CSS. In Webflow, you can stack multiple classes together just like you can in regular CSS. However, the UI-only approach makes it quite difficult to create basic styling classes that can be reused and applied to different types of elements.

What Webflow allows you to do easily is creating combo classes, meaning that when you apply a second class to an existing class, a new style is applied on top of the first class's styles. However, this isn't quite as powerful as the reusable classes you can build in pure CSS: if you wanted to apply that second class's styles to a different element, you would have to create new classes and define the styles all over again.

Luckily, it is still possible to create those more powerful reusable classes in Webflow, it just isn't displayed or suggested in its user interface. It does require a basic understanding of CSS in order to understand the inner workings of it, but it's fairly straightforward nonetheless.

Simply create an element and assign it the new reusable class you want to create. Give the class the styles that class should define, and... that's it. You can now use that class as you would with combo classes, except you can use it on any type of element.

On this example, the four classes used are totally independent, and each bring their own styles:

.section: Gives the element a top and bottom padding.
.fullscreen: Gives the element a minimum height of 100vh.
.flex-center: Gives the element a flex display type and sets its flex alignement properties to center.
.pink-gradient: Gives the element a linear gradient as a background.

Don't get me wrong: combo classes are great, and they do have their place, but the reusable classes described above can get you pretty far and make your development easier.

Use headings semanticallyinstead of using them for their look

Headings are quite useful to put emphasis on an element or a section of text. H1 and H2 tags are bigger and bolder by default, so it's only normal that people would use them to do just that.

However, the level you give to a heading has an actual meaning. Search engines and other website parsing services use the headings to determine the structure of your page.

H1 tags should generally contain the main subject of your page, and therefore, should only appear once per page. Every other level after the H1, so H2 through H6, should contain the subject of the sub-sections of the upper level.

Here's an example based on this page:

H1: Tips, tricks and good practices for Webflow
H2: Style the tag before adding classes all over the place
H3: When to style tags over classes
H3: How to style tags directly in Webflow
H2: Reuse your classes and build them with that goal in mind
H3: Why combo classes aren't completely reusable
H3: How to create pure reusable classes in Webflow

I could keep going on, but I think you get the point: H3 tags are subsections of the previous H2 tags, H2 tags are the subsections of the H1 tag, and the H1 tag is the subject of the entire page. Although they aren't usually used as frequently, H4, H5 and H6 tags have the same meaning.

Now, if all you wanted wanted was to make some text bigger and bolder without actually giving it more semantic importance in the page (and therefore, without messing with your on-site SEO), you can simply create a class that does just that.

Think this page is missing something ?
Have a tip, trick or best practice in mind that could be added ?
Want to provide some feedback ?

Simply fill the form below to send me a message, and I will try to reply as soon as possible.

Your message has been sent successfully; thank you!
Oops! Something went wrong while submitting the form.