BEM Class Naming Convention in Webflow

what's up youtube welcome back to the channel for webflow pros if you're new here smash that subscribe button below so you never miss out on a future tutorial the idea for this tutorial actually comes from brian who asked for a tutorial on bem naming conventions now if you're not familiar with that that's just a fancy way to say how we stay organized when naming our classes so if you're not using that you'll often run into a situation like this where you'll have image two image three image four you'll have a bunch of classes that aren't properly named and that are very hard to stay organized and it gets out of hand quickly so i found a good combination for bem everyone pretty much does it slightly differently but the principle stays the same and that's that b stands for block e stands for element and m stands for modifier so if we look at this hero for instance this entire hero section would be our block or our hero anything inside that would be an element so if we had a headline it would be hero underscore underscore headline or hero underscore underscore button or whatever that element is so we know that that element belongs to the hero and the modifier is written in its own way that's a combo class so anything we add on to either the block or the element to change the way it looks and that's our modifier it's written in different ways so i use a combination of the method found on webflow's blog and also the method found on the bem website i found that the two of those uh work really well together and i'll show you why because the way webflow handles classes can be a little bit different so we're going to dive in and just start renaming classes on an existing project that doesn't really have proper class naming and if we look at this entire nav over here on the left this is pretty much a block and it has different elements inside it so whenever you're naming classes in webflow you don't want to use any capital letters or any spaces the reason for that is when you publish your site webflow converts any capitals to lowercase any spaces to dashes so if you're reference in this class in your css or javascript it could break your code because the class name changes on the published site so for best practices um all lowercase and no spaces so if this whole thing is our block we'll just start by the name of it and we'll call it nav you can call it whatever you like you can call it nav bar but because we're changing these class names and we're using it in other places the shorter the better so as long as you understand what it is it's short and concise then you're good with a name there so i'll call this nav now anything inside it is an element inside this block so this logo for instance maybe i'll have another logo in the footer maybe i'll have a logo grid that's when it gets out of hand with logo one logo two logo three to solve for that we're just going to start by naming it the block name that we have here so this is nav then do two underscores and then the name of the element this element is a logo so now we know this is nav that belongs this is a logo that belongs to the nav it's in the nav and this also speeds up your workflow because you're not having to think of new class names or reinvent the wheel every time you go to name a new element you can pretty much just know once you have that first block defined how to name every element inside of it this is an image but i may have multiple images inside my nav so i may want to get a little bit more specific so i'll call this nav underscore underscore and then i'll call it um you want to stay as concise as possible so i'll just abbreviate img dash logo so this is an element image logo um that's inside my nav and it's a totally separate element even though it's inside this logo link it's a totally different element than the logo link itself there are two pieces that belong to the nav so if we look at this next part which is has a lot to it it has album art it has a time title and then there's different paragraphs there's also a paragraph below here in the nav um it can start to get confusing we could start to chain this maybe too much maybe this is the time but maybe this is the time text so it would be nav underscore time text time text uh bar and it could get too long so really it's up to you when you want to start a new component but usually if there's a lot of elements and this is one piece that's inside another block this is where i would start a new block here so instead of starting it with nav i'm just going gonna call it um album so album right here and then anything inside that belongs to the album now so this would be uh album and then underscore uh image img so this is an element and two underscores there this is an element belonging to the album component and then same with the titles same with the bar so maybe this nav time bar is now an album bar and it would be just like this album underscore bar um so then this piece this box i may because it doesn't have a lot in it i may want to just make it a box inside of the nav so maybe it just belongs to the nav as a whole so this would be nav underscore and then we'll just call it um message and then this right here the text inside it would be nav underscore underscore message dash text it's its own element but it's sibling the sibling of nav message is the whole album um info which i realized this still needed to be named so this is actually my root parent um this would be the thing that's the actual album and this inside of it is a container inside the album so this would be album underscore underscore container and then the whole parent which is this one here would be the actual album div um if that makes sense so that's the start of sort of how we name things now you may have blocks that you want to use in other places of the site so like for instance here this would be my controls div and then anything inside it this button isn't only being used inside the controls div it's also being used down here further on down the site with a combo class to make it larger so this right here i can just make it its own block even though it lives inside a block it can be a block nested in a block so this maybe would be um maybe it could be our button uh the holding and then inside the button we would have the button underscore underscore link and then inside there this is the fill color of the button so this would be button underscore underscore fill and these are all just elements inside the overall button block um so it starts to make sense when you lay it out this way but in underscore underscore circle and then this last one would be button underscore underscore icon so you start to get a hang of um just how to name these things this would be button underscore underscore text cool and then whenever we have a combo class so like this um let's see if i can find an example of a combo class this one here is a color um so our combo classes we write a little bit differently and the reason we do that is so that we know that this is a combo class and not a main class um so i'll just go ahead rename this we start all combo classes with the word is is then two dashes and then the name of the common class so this would be yellow and this one over here would be is dash dash blue so that's how we name our combo classes and i believe right now if i go to add that blue back in you'll see it's appearing up at the top so this is a local class everything below here is a global class and a local class only applies to this one element so if i were to come over to this album container and i ordered to apply that is dash dash blue you'll notice there's no uh is blue class applied to this container yet so that's because this local class only applies to that particular button circle class it doesn't apply to anything else so if you want to create a global class you're going to need an empty div or some item that doesn't have any class on it then you can do is dash dash blue or whatever you want your class to be apply a background color to there and now this is a global class that you can apply on any other class so if i delete this comma class now go back to the album container and i start to type is dash dash blue you'll see it's appearing under this global combo class so now i can apply it there i can apply it to anything i want to apply it to and this is a global class that i can reuse on any other element um so that's helpful to know because it already depends on your intent if you want to reuse this blue background class on a bunch of different elements like maybe this whole section maybe this down here then i would create that as a global class on an empty div but there are instances where maybe you only want to apply something to just the one class like say this button i only want it to change it in the hero and so i would do is dash dash hero and then i can change anything about the way that this one particular uh button or fill color works maybe i change its radius or something now i can reuse that is hero class on something else like maybe this right here is dash hero so this isn't actually changing the radius uh web treating it almost like a brand new class that's never been added before because it's never been added to this main class so now i could do something else like maybe i change use it to change a background color or something so basically this is a fresh new class that's totally unrelated to the is hero applied to this class because it's a local class not a global class so feel free to use those pretty much however you prefer but know the difference between the two and when to use each is totally up to you and what you're trying to achieve there so that's basically how you would go about naming some of these classes how you go about writing combo classes and how to stay organized with naming your different classes in webflow i hope this video was helpful actually if this content has helped you uh please consider becoming a patreon you can fill out the link below and i'm working on building up the community for patreon so we'll actually have some gated resources available right now that you can have access to just as a special thank you to those of you who support this channel allowing more content to be produced i hope you've enjoyed this video i hope it was helpful and i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 10,032

Keywords: webflow, how to, tutorial, lesson, class, classes, naming, name, organized, large project, lots of classes, order, structure, arrange, label, css

Id: Zg3Pjyd_QCs

Length: 12min 7sec (727 seconds)

Published: Sun Nov 22 2020