Best Webflow Naming and Building System

The best Webflow naming and building system to keep things structured and make it fasted to build and update pages.
👋🏻 Where to find me
All templates: www.nikolaibain.com/templates
Website: www.nikolaibain.com
Instagram: / nikolai_bain
Dribbble: dribbble.com/nikolaibain
📨 Still confused? Feel free to email me at [e-mail]
#webflow #designsystem #webflowsystem

[@jvanik]

Literally what the title says: Best Webflow Naming and Building System. This is amazing. Thanks for making this video! 🙏

[@celinereynaud5183]

Daaaaamn your videos are such a precious source of information, thank you sooooo much for what you do 🙏🙏🙏

[@NikolaiBain]

Too nice, thank you so much!

[@markojurisic222]

Are you still building this way? :)@@NikolaiBain

[@NikolaiBain]

@@markojurisic222 Three years on, still building the same way 😎

[@adamturk7583]

This really helps, thanks Nikolai

[@vespersinclair]

Thanks for the awesome tips, Nikolai! This is just the information I needed on naming classes and keeping things organized. Can you please share a bit more on how you set up the 12 column layout? Seems like a good system, but very different from what I’m used to, so I’m not sure how to replicate it in my own projects.

[@AzharBhagas]

Nice tips! Thanks for helping me out structuring my webflow

[@NikolaiBain]

Thanks Azhardhia! 🤩

[@bennixzz7043]

Just wondering, when he builds a section with a Column Layout why does he keep it 5 1 6 instead of 6 and 6 to be able to adjust the spacing in between?

[@farukbhuiya5072]

Ow. Its great

[@arturorago50]

Hi Nikolai, what do you think of Client First? Any pros or cons from your perspective? Thanks so much!

[@BumbCat]

thanks alot

[@dsico7808]

Hey Nikolai, kudos for the great informative content - a very elegant approach to naming. Just curious - do you start each project from scratch and write all the classes for spacers, columns etc. or do you duplicate a template with everything set up as you like it?

[@danielamorue]

Hello Nikolia, would you say using spacers and columns are more efficient than margins and grids? I currently use margins and grids but I would love to know if I should also hop on this pattern.

[@madhursharma8217]

why you didnt use bem classes?

[@fictionplus]

Do I have to use Figma to start? Or I can just start designing and building in Webflow

[@alexsiale5203]

This hurts to watch because I know my project is very badly labeled.... haha, great tips here! thanks

[@NikolaiBain]

Haha, it's always hard to make class labelling perfect! 🍸

[@user-wr1fz6wr4q]

Do you have any thoughts on how to fix bad labeling on a website? I can only think of re-building it... Thanks

[@NikolaiBain]

Hmm nothing off the top of my head, maybe something I'll have a play around with and cover in an upcoming video!

[@livstrawbridge2447]

Hey Nikolai, have you tried Finsweet's Client-first system at all? If so, what are your thoughts about it compared to making your own? I'm in the process of improving my approach to naming classes, but I'm not a big fan of naming classes with hyphens and underscores as you do in Client-first (I prefer title case and spaces). I wondered also which approach is best practice for building templates too? Would love to know your thoughts :).

[@NikolaiBain]

Hello fellow kiwi! I don't use client-first for most of my projects, but using client-first makes a lot more sense when there is a lot of custom code/javascript that is involved. As a rule of thumb, no custom code, I will use my own system. A lot of custom code, I will use a system much closer to client-first based :)

[@livstrawbridge2447]

@@NikolaiBain Hey 🥝:). That totally makes sense, thank you! So with that in mind I'm guessing you would use your own system for building Webflow templates? It would probably make it more user friendly too?

[@NikolaiBain]

@@livstrawbridge2447 Yes indeed! Try to make it as easy to pickup and adapt as possible

[@livstrawbridge2447]

@@NikolaiBain Awesome, thank you :).

[@fictionplus]

I agree with you. I like their system but I want to make my own internal system with documentation.

[@AbhijeetWankhade]

These are some great tips, Nikolai! Do you ever have to break the naming rules for classes for unique elements (eg. Logo nav vs Logo footer)?

[@NikolaiBain]

Definitely, whenever suitable I will use custom classes still but make sure they are fit for use and keep them to a minimum :)

[@natalie.cotton]

How does your mobile swap class work?

[@NikolaiBain]

Hey Natalie! 'Mobile swap' swaps the order of the columns in a 12 column row. So if you stack the columns on mobile but they aren't in the right order, you can reverse them :)

[@natalie.cotton]

@@NikolaiBain I never noticed the reverse order button before! Thanks for the great tips! :)

[@Marc-uw4lw]

Nice video but this didn’t actually touch on naming conventions. A NC I’ve used for about 20 years is a common-to-unique format. For example, your column classes would be “column-12”, “column-6” etc. That way all of your column classes will appear together in a list and if you use fancy CSS or JS selectors in future, you can target all column classes with something like [class=“column-*“]. Good naming conventions are standard, systematic approaches to naming things so you and the code can easily read, understand and use them. Another example is adding a double hyphen before a describing an element’s state, or modifier, (this approach is used in the BEM NC). For example: “button-primary-hover” or “link-secondary-disabled”. You see the type of element appears first, then the style and finally the state. I hope this helps to further optimise your WF projects in future.

[@gdgd730]

I don't understand why you don't just use H1, instead, you put H1 to override the universal All H2 Heading? What is the logic behind it? Also, I got completely lose it when you started to talk about responsive layout... at 10:05 🥲 It's too fast, and you missed explaning the setting of the Display. A Webflow newbie will completely be lost if they follow your step-by-step part.

[@poface4827]

He kept it H2 because it wasntba main title. This matters to Google and they way it indexes sites for search results etc. Also helps with keyboard navigation around the site.