Deleting and then adding a modifier class is a small price for keeping the code maintainable. Global classes harden the maintenance because, as you mentioned, the client or other developer may change the styling for a global class, and that may cause issues. With modifiers, the styling is sort of more isolated inside of a specific element by the naming convention. Also, you mentioned that BEM may not be the best choice but didn't mention why. I think BEM is a great choice! It's basically the same naming system as the "client first" but doesn't encourage using global utility classes (which is good, in my opinion).
By the way, if using BEM modifiers as prescribed in the BEM documentation, then there wouldn't be a situation with breaking the markup in some other element when editing the modifier's properties. For example, if you have the following classes: some-element some-element--modifier, then the some-element--modifier will be specific for this block only (some-element block), and there wouldn't be a possibility to break some other block on the website.
Love it. Do you have an ebook for your Webflow guidelines? That'll be gold for quick reference. An email newsletter too to keep up to date with videos. Perhaps a Discord channel to develop a community.
@@designbasestudioSet any property on the smaller break points and they'll be avilable for selection later in the combo classes. So basically if it's "button button-primary", set all break points for button, any property will do, and then it will be available. You can even fake it, like just set the same padding from desktop just so the class is available, then change the values later as needed.
@@TheMarouuu yes but in case you don’t have any properties you need to delete the combo temporarily to make changes to the base. And i would just set fake values just to make the class available in smaller breaktpoints. This blows up your css.
What i do not understand is: Imagine we have a utility class d-flex, it only contains display:flex; justify-content:center align-items:center; Now you add a doviv block and give the div block d-flex All okay but now i have a .button and i want to apply the d-flex class so .button .d-flex It wont work because i need to set up a second class d-flex wich is only used by .button This confuses me because i cant make real global utility classes only utility classes wich is used by a specific element... Or is there a way to make a utility class wich can be used to all elements like in my example .div .d-flex and .button d-flex or even .link-block .d-flex? Im not sure if its clear what i mean but if you programming without webflow you can make this freely. In html it would look like this: Css: .d-flex{ Display:flex; Justify-content:center; Align-items:center; } .div { Width:100px; Height:100px; } .button { Width:100px; Height:100px; } .link { Width:100px; Height:100px; }
This sounds like there is a problem with the order of your classes within Webflows CSS file. This can happen from time to time. Install Finsweets Browser Extension. There is a tool to reorder your styles. Move the d-flex class to the bottom and than it should work... PS. Make a backup before you do this ;)
You're a real gem to the webflow community. Thank you for all you're doing!
Thanks 🙏 Felix
Thank you so much, the narrative style is amazing 👌and always straight to the point.
You are welcome!
This was an incredibly helpful, short and concise video!!
Happy to hear! Stay in the flow ✌️
Thanks for this video. It's clear and straight to the point. So many videos overcomplicate this topic.
You are welcome! That was my intention 😊
Loving this series, thanks for the great videos 🔥
Thanks for the support 💪
Deleting and then adding a modifier class is a small price for keeping the code maintainable. Global classes harden the maintenance because, as you mentioned, the client or other developer may change the styling for a global class, and that may cause issues. With modifiers, the styling is sort of more isolated inside of a specific element by the naming convention.
Also, you mentioned that BEM may not be the best choice but didn't mention why. I think BEM is a great choice! It's basically the same naming system as the "client first" but doesn't encourage using global utility classes (which is good, in my opinion).
By the way, if using BEM modifiers as prescribed in the BEM documentation, then there wouldn't be a situation with breaking the markup in some other element when editing the modifier's properties. For example, if you have the following classes: some-element some-element--modifier, then the some-element--modifier will be specific for this block only (some-element block), and there wouldn't be a possibility to break some other block on the website.
Bem is great but in Webflow other systems have more potential
I disagree. BEM is better for Webflow.
very helpful ! thx
You are welcome, again 😉
You're so helpful thanks mate!
You're welcome Brendin!
Love it. Do you have an ebook for your Webflow guidelines? That'll be gold for quick reference. An email newsletter too to keep up to date with videos. Perhaps a Discord channel to develop a community.
Coming soon!
Why do you delete the combo class for mobile? You can just select the base class and then go back. Is there an advantage in deleting that I'm missing?
If you look carefully it is not always possible to select the base class on smaller breakpoints.
@@designbasestudioSet any property on the smaller break points and they'll be avilable for selection later in the combo classes. So basically if it's "button button-primary", set all break points for button, any property will do, and then it will be available.
You can even fake it, like just set the same padding from desktop just so the class is available, then change the values later as needed.
@@TheMarouuu yes but in case you don’t have any properties you need to delete the combo temporarily to make changes to the base. And i would just set fake values just to make the class available in smaller breaktpoints. This blows up your css.
@@designbasestudioThat's a fair point.
What i do not understand is:
Imagine we have a utility class d-flex, it only contains display:flex; justify-content:center align-items:center;
Now you add a doviv block and give the div block d-flex
All okay but now i have a .button and i want to apply the d-flex class so .button .d-flex
It wont work because i need to set up a second class d-flex wich is only used by .button
This confuses me because i cant make real global utility classes only utility classes wich is used by a specific element...
Or is there a way to make a utility class wich can be used to all elements like in my example .div .d-flex and .button d-flex or even .link-block .d-flex?
Im not sure if its clear what i mean but if you programming without webflow you can make this freely.
In html it would look like this:
Css:
.d-flex{
Display:flex;
Justify-content:center;
Align-items:center;
}
.div {
Width:100px;
Height:100px;
}
.button {
Width:100px;
Height:100px;
}
.link {
Width:100px;
Height:100px;
}
This sounds like there is a problem with the order of your classes within Webflows CSS file. This can happen from time to time.
Install Finsweets Browser Extension. There is a tool to reorder your styles. Move the d-flex class to the bottom and than it should work...
PS. Make a backup before you do this ;)