How to Write Good HTML & CSS with Webflow
No time? Scroll to the bottom to see my top 5 tips for writing good code in Webflow.
TLDR: If you are a front-end developer, test out using Webflow to “write” your HTML & CSS. It is a user interface for code that, if used correctly, can quickly generate good quality mark-ups. Just be sure always to use a style guide and watch out for class names, non-semantic HTML and excess code.
I recently used Webflow to generate most of the HTML and CSS for a homepage. I found that, once I had the process down, I could produce a lot more quality code in a given amount of time than I would normally be able to.
In this post, I’d like to share with you a bit about Webflow, why it is now my go-to tool for writing HTML and CSS and some things to look out for if you decide to do the same.
What is Webflow?
Webflow is essentially a user interface for writing HTML and CSS. The interface provides the user with a suite of common elements to mark-up HTML and a control panel catering for every sort of CSS declaration you could ever want to use.
Although you can start dragging around elements and play with the control panel to produce any sort of layout imaginable without having to understand how to code, in my opinion, Webflow comes into its own when you know how HTML and CSS work in tandem.
Webflow comes with a powerful code export feature that allows you to export the code that you are “writing” as you use it.
For example, if I create the following layout:
It is equivalent of me typing the following code:
and you can see, if I go to code export in Webflow, that exact code has been generated. (Note I included the class .heading — more on that later)
While not so noticeable for this example, as your layouts become more complex, dragging elements and pressing buttons is a lot faster than typing. Not only is it faster, once you get your bearings, styling your elements becomes far more visually intuitive using the control panel. This is why Webflow is my go-to tool at the moment for “writing” the bulk of my HTML and CSS.
One of the dangers of using Webflow to produce your code is that, if you are not careful, you can end up with code that has a tonne of div elements with too many class names. This can make your code bloated, non-semantic and in general, “WET” (which stands for Write Everything Twice, the opposite of “DRY” which, in programming, stands for Don’t Repeat Yourself). The reason for this is that when you go to style an element in Webflow, if you do not give it a class name, Webflow will automatically give it one and apply the style to the class name and not the element itself. Remember the .heading class I created earlier? If I hadn’t had specified this, Webflow would have generated one automatically instead of applying the style to <h2>.
To avoid this, it’s good to start a project in Webflow with best practices in mind. The first thing I do in any Webflow project is to apply my base-styles to a “Style Guide”.
NOTE — Credit must go to Ran Segall for what I am about to show you. It was thanks to his Webflow Masterclass that I learned how to make this Style Guide in Webflow.
Starting with a style guide on a separate page like this:
You can set all of the global and re-usable styles for your site. That way, every time you drag an element (say, <h1>, <p> or <a>) into the designer, it will be pre-styled according to your style guide, and you won’t need to create additional classes to style base elements.
After I have finalised my style guide page, I export the code to generate my global and re-usable styles in my CSS.
Before moving on, let’s take a brief look at what the exported code looks like.
When you export code from Webflow, you are delivered a .zip file that contains:
- your projects style sheet (your-project.css) — currently populated with our global styles.
Files 1–4 will probably seem familiar but 5 perhaps less so.
webflow.css contains all the styling for Webflow’s pre-built components such as “Navbars”, “Forms” and “Buttons”, and unless you have used these components in your design, then you may not require any of the stylings in this file.
With the base styles created and an HTML boilerplate set up, I then move on to producing the main layout section by section in Webflow and exporting at various intervals to check, copy and paste the code that is being generated.
This blog won’t go into the ins and outs of how to make layouts in Webflow but know it is an absolute dream for creating responsive layouts using Flexbox.
My Top Tips to tips writing good code in Webflow
You may be a developer wanting to utilise this tool, or you may be a designer wishing to write front-end code to hand off to your developer.
Either way, it is important to keep whatever you create as clean and effective as possible. With that in mind, here are my top tips for generating good code in Webflow:
1. Always use a Style Guide
As I said above, using a style guide will keep your CSS “DRY”.
2. Hyphenate your class names
Webflow defaults to lowercase class names when you export your code. Therefore, if you write your class names in camel case, Webflow will not export them as camel case but rather one long lowercase word. To avoid ugly looking, non-sensible class names, hyphenate instead of camel-case.
3. Make your HTML more semantic post export
EDIT: 18/04/19 — Since writing this post I have learned that it is possible to set semantic tags from the Settings tab in Webflow prior to exporting.
Webflow provides separate ‘Section’ and ‘Div’ elements, but when you export the code, sections do not export as <section> tags but rather <div> tags with whatever class name you provided them. To make your HTML more semantic, be sure to replace appropriate divs with more semantic HTML elements. For example: <section>, <header> and <footer> tags.
4. Only use code that you need
EDIT: 18/04/19 — Since writing this post I have learned that you can use the Clean Up option in the Style Manager to remove unused classes.
When you delete an element in Webflow, any associated styles are not automatically deleted and will still be present in the exported code. In other words, you cannot “un-write” code in Webflow. Also, you may not need webflow.css unless you used any of Webflow’s pre-built elements such as Navbars, Forms and Buttons. The webflow.css file may be useless to you. With that said, if you did, you may not need to use the entire style sheet and only select components.
In either case, it’s always worth checking through the exported style sheet and discarding of any unnecessary code.
5. Add comments
As a final touch, be sure to comment up the exported code. For example, you can add CSS comments to section out your style sheet and HTML comments to label closing </div> tags.
If you use Webflow, let me know what you think of this article! Hope it was useful :)