How to Write Good HTML & CSS with Webflow

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:editing a style guide — credit: Ran SegallYou 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.

exported style guideBefore 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:index.

htmlstyle-guide.

htmlyour projects style sheet (your-project.

css) — currently populated with our global styles.

normalize.

csswebflow.

cssFiles 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 WebflowYou 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 GuideAs I said above, using a style guide will keep your CSS “DRY”.

2.

Hyphenate your class namesWebflow 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 exportWebflow 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 needWhen 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 commentsAs 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 :).. More details

Leave a Reply