This video just blew my mind. How well does this naming convention integrate with MAST and other frameworks? For example, MAST has custom section classes. Would this method mean I’d create custom section classes (hero_section, services_section, etc) and then apply the global section classes as a utility to each one? Appreciate the greatness man!
I'm so glad to hear that! This convention works great with any framework. Yes, you would have a "hero_section" with a combo class of "section" on top. It would help a lot with the col classes also. For instance, you wouldn't have to remove the mobile and tablet class if you wanted to change the desktop class.
@@timothyricks This sounds fantastic! I had the same question about MAST. So are you suggesting something like: hero_section.section and inside of that: hero_container.container, and inside of that: hero_row.row, and inside of that: hero_col.col, and then e.g. hero_col.col.col-md-6 ?
@@iTubeFF Yes, but instead of hero_col, it could be hero_visual & hero_content. They need to have different custom class names if they're going to have different column counts.
@@timothyricks Your mean like: hero_visual.col.col-lg-8, and hero_content.col.col-lg-4 if I want the image to span 8 columns on desktop, and the text 4 columns?
🎯 Key points for quick navigation: 00:00 *Every Webflow project should utilize Global classes known as utilities for consistency across sections.* 00:14 *Custom classes are named with underscores, indicating their specificity to individual components.* 00:28 *Avoid using combo classes for overrides as it complicates editing and can lead to loss of styling when changing element types.* 01:09 *For effective styling, apply overrides directly to custom classes to maintain flexibility when element types change.* 02:06 *Custom classes ensure unique styles can be managed across breakpoints without affecting Global classes.* 02:48 *All elements should have custom classes, even without applied styles, keeping the global CSS organized and editable.* 03:42 *Custom classes enhance code targeting and prevent accidental global changes, making site styling more controlled.* 04:50 *Overrides should ideally be kept on base custom classes to facilitate easier management when renaming elements.* 05:18 *Custom classes can be specific and organized based on component types, enhancing clarity in the navigator.* 06:27 *A systematic approach to naming and applying classes leads to easier component management and reusability throughout the project.* Made with HARPA AI
Something similar to BEM. I worked like this earlier but then realized that it was too long. There are a lot of elements that are absolutely the same and giving them different classes and setting them makes the development process longer. Moreover, the more classes - the longer CSS means slower site speed. But I like your approach of naming a class personally for the element and then using a utility combo class for styling - that will work well. BTW, thank you for the Chrome Extension, it is really useful!
Tim mentioned that naming the class doesn't add CSS, it only adds it if you make a change outside of using utility classes. Yeah it takes longer to write the class names but I can't imagine it'll be that much more work once we get used to it.
Love it. I’ve been also doing this. It has a few drawbacks but still worth it. For example you might end up searching for the blue color in the style name when you are trying to see why something looks different on mobile. Or if you rename the base global class, it won’t be updated on the stacked ones.
Great points! We can still click the orange label to see which class the style is coming from, but having the blue label would be nice for sure. Renaming a base global class has never been ideal in Webflow even if just two utilities were stacked together without a custom class.
@@Kabarza Thank you! I’ve instinctively known this is the best solution for a while now, but never took time to think of and write out all the reasons until preparing for this video.
I love this. I'm odd and actually love using custom classes, but when I started developing with Lumos I assumed classes had to be more generic for wider global editing. Now using custom classes and stacking utilities makes way more sense. This is awesome. Especially since I've struggled a bit with some GSAP due to some elements sharing the same class and utilities despite custom attributes. This is awesome 🎉
Hi Rick, setting a flex gap on the parent is the best spacing solution when working with components because the space will hide automatically if the client disables the paragraph or any other element in a component instance. If using margin for spacing, there's css that can automatically remove the margin from the last child, but it only works on the published site since Webflow just hides disabled component elements in designer view and doesn't completely remove them yet. If you're trying to replace spacing divs while keeping their spacing classes, the classes could be stacked like this. "hero_heading heading-style-h1 margin-bottom margin-small" Ideally in a case like that though, I'd combine the last two classes into one "margin-bottom-small"
This video just blew my mind. How well does this naming convention integrate with MAST and other frameworks?
For example, MAST has custom section classes. Would this method mean I’d create custom section classes (hero_section, services_section, etc) and then apply the global section classes as a utility to each one?
Appreciate the greatness man!
I'm so glad to hear that! This convention works great with any framework.
Yes, you would have a "hero_section" with a combo class of "section" on top. It would help a lot with the col classes also. For instance, you wouldn't have to remove the mobile and tablet class if you wanted to change the desktop class.
@@timothyricks ohh man that’s been such a headache of mine!! I can’t wait to try it out
@@timothyricks This sounds fantastic! I had the same question about MAST. So are you suggesting something like: hero_section.section and inside of that: hero_container.container, and inside of that: hero_row.row, and inside of that: hero_col.col, and then e.g. hero_col.col.col-md-6 ?
@@iTubeFF Yes, but instead of hero_col, it could be hero_visual & hero_content. They need to have different custom class names if they're going to have different column counts.
@@timothyricks Your mean like: hero_visual.col.col-lg-8, and hero_content.col.col-lg-4 if I want the image to span 8 columns on desktop, and the text 4 columns?
🎯 Key points for quick navigation:
00:00 *Every Webflow project should utilize Global classes known as utilities for consistency across sections.*
00:14 *Custom classes are named with underscores, indicating their specificity to individual components.*
00:28 *Avoid using combo classes for overrides as it complicates editing and can lead to loss of styling when changing element types.*
01:09 *For effective styling, apply overrides directly to custom classes to maintain flexibility when element types change.*
02:06 *Custom classes ensure unique styles can be managed across breakpoints without affecting Global classes.*
02:48 *All elements should have custom classes, even without applied styles, keeping the global CSS organized and editable.*
03:42 *Custom classes enhance code targeting and prevent accidental global changes, making site styling more controlled.*
04:50 *Overrides should ideally be kept on base custom classes to facilitate easier management when renaming elements.*
05:18 *Custom classes can be specific and organized based on component types, enhancing clarity in the navigator.*
06:27 *A systematic approach to naming and applying classes leads to easier component management and reusability throughout the project.*
Made with HARPA AI
Mindblown Tim. If only I watched this when I first started Webflow. It would've saved me so many headaches.
I’m so glad this helped, Austin! Thank you for encouraging me to create this video in the first place.
Great point about using custom classes on every element to make JS targeting easier and less apt to break.
Something similar to BEM. I worked like this earlier but then realized that it was too long. There are a lot of elements that are absolutely the same and giving them different classes and setting them makes the development process longer. Moreover, the more classes - the longer CSS means slower site speed. But I like your approach of naming a class personally for the element and then using a utility combo class for styling - that will work well.
BTW, thank you for the Chrome Extension, it is really useful!
Tim mentioned that naming the class doesn't add CSS, it only adds it if you make a change outside of using utility classes. Yeah it takes longer to write the class names but I can't imagine it'll be that much more work once we get used to it.
I learn so much from you Timothy! Great video.
Thanks so much!
Convert all projects to lumos. Check.
Love it. I’ve been also doing this.
It has a few drawbacks but still worth it.
For example you might end up searching for the blue color in the style name when you are trying to see why something looks different on mobile.
Or if you rename the base global class, it won’t be updated on the stacked ones.
Great points! We can still click the orange label to see which class the style is coming from, but having the blue label would be nice for sure. Renaming a base global class has never been ideal in Webflow even if just two utilities were stacked together without a custom class.
Exactly.
You did a phenomenal job putting all that together and explaining it. I’m so confident now that I wasn’t doing it in an odd way 😅
@@Kabarza Thank you! I’ve instinctively known this is the best solution for a while now, but never took time to think of and write out all the reasons until preparing for this video.
Every time so impressed with your videos - so useful
Great video! I guess you're sick. Get well soon T!
Yes, thank you!
I love this. I'm odd and actually love using custom classes, but when I started developing with Lumos I assumed classes had to be more generic for wider global editing.
Now using custom classes and stacking utilities makes way more sense. This is awesome.
Especially since I've struggled a bit with some GSAP due to some elements sharing the same class and utilities despite custom attributes. This is awesome 🎉
That’s awesome! It sounds like you really get the value of custom classes
Top tier organization!
Curious to your spacing solution in this one. I can’t imagine you make every space a custom class?
Hi Rick, setting a flex gap on the parent is the best spacing solution when working with components because the space will hide automatically if the client disables the paragraph or any other element in a component instance. If using margin for spacing, there's css that can automatically remove the margin from the last child, but it only works on the published site since Webflow just hides disabled component elements in designer view and doesn't completely remove them yet.
If you're trying to replace spacing divs while keeping their spacing classes, the classes could be stacked like this. "hero_heading heading-style-h1 margin-bottom margin-small" Ideally in a case like that though, I'd combine the last two classes into one "margin-bottom-small"
Brilliant!