You Probably Need BEM CSS in Your Life (Tutorial)

Key Takeaways

today you're going to Bema fie your CSS whatever that means hey everybody what's up Gary Simon here so today we're gonna be talking about BEM or the block element modifier approach to writing HTML and CSS now you may have seen it in code pen for example and your CS into CSS and the HTML these weird doubles underscores and the double dashes and you're probably thinking is that auto-generated or something and no it's basically people who are following the BEM I of methodology to writing their HTML and CSS so if you check out I this EMM info on the main site it'll tell you and give you more information about what exactly this is but in a nutshell basically if you're dealing with a project that is a serious project it has multiple pages and a bunch of rule sets and HTML selectors it can be difficult to maintaining that code and writing that code because you can run into issues of what's called specific and you may be perhaps you're changing CSS in one area of the app but somehow it starts affecting another area and it becomes kind of confusing on how to deal with it well that's one of the several advantages to using the BEM method because it helps avoid issues like that as much as possible so initially I'm going to go through a few slides here just to give you a real broad understanding of what it is and then we're gonna hop into the code and then it should really come full circle and again this is really aimed at beginners I really want to get into more you know more in-depth talks with topics as it pertains to them I but we'll save that for the future so for now this is just real beginner level stuff you should have no problem understanding it now as always make sure to subscribe let's get started before we begin Leno takes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with backend access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors can do that too so sign up using the link below in the description to get $20 in credit on your new Allah note account so first we're going to need to look just very quickly I know you guys hate slides and all a couple slides that I made and Adobe XD to give a real quick overview of what them or p.m. is and what it really stands for so of course it stands for block first for the B and that's a standalone entity that is a meaningful on its own and these these definitions of these three elements come straight from them itself or the official documentation element of course is the E and that's a part of a block that has no standalone meaning and it's semantically tied to its own block alright so this is the stuffs all gonna make sense here shortly though in M modifier is a flag on a block or element and use them to change the appearance or behavior of either blocks or elements alright makes sense probably not at this point but that's expected so let's just take an example of this quick card and by the way we'll be doing an actual card although it's gonna be set up differently a little bit more complex than this and HTML and CSS after this these slides here so here's a basic card and we have to ask ourselves you know what is a block in this card what is an element and what is a modifier so first let's take a look at what might be a block so the block itself is the card all right and we can name that block whatever we want whatever makes sense cartwright it's a card duh all right so what would this photograph be well it's an element because it's going to be inside of that block and it's tied semantically to this block element in the way you designate what an element is is based on the block class card name so this is the card and then you do two underscores and then the name of the element alright so hopefully that makes sense and it will if you keep watching you better not leave alright and then what would this title be right here this would be like an h1 element for instance all right that's going to be a element as well because it's an element it's it's semantically tied to this card all right so it's going to be card underscore underscore it's kind of hard to see the two underscores here but there's two underscores and then title alright next same thing with the the paragraph right here it's an element so card underscore underscore description and then also we have two things happening here with this button alright it's an element so a card - - it's a button so we're gonna give it a card button and it's also a modifier that I've optionally attached to it to make it a certain color because perhaps there's multiple cards and maybe there's an active color card worth an active button right so the way you you designate that being that it's a modifier is you do a could this could either be tied to a block or an element in this case it's tied to the element of card button so we do the element name in this time not two underscores there rather two dashes along with the appropriate name that you want to give it whatever makes sense whatever it's relevant in this case it would be active making it in an active button alright so hopefully that makes sense for it since I just to expand a little bit are on the modifier idea like I said it could be a tie you can have a modifier a tied to a block and an element or an element so in a case let's say for instance we have we wanted to have an active card maybe with a border around it well we could have attached in modifier to this element and so it would be class equals card space and then card - - active so hopefully that makes sense now let's go ahead and step into actual code to make this stuff really come full circle and do our own example from scratch okay so here I have open visual studio code we have an index on HTML with no markup here we're linking to a CSS main CSS file I'm using sass for this by the way which I've already ran with the sass live compilation extension which you can install over here if you wish and I'm going to use sass just to show you the sass way of dealing with BEM or BPM and I only have these two rule sets here just to I you know put a basic background font and also display grid to put our card in the center vertically and horizontally over here alright so gonna go over here to wait how did that change I think I changed the color by accident all right there we go so this is over here is our preview of what's happening in the browser so we're going to create the standard markup knock the BEM way of just creating a card HTML write-up and so what I'm going to do is first write it normally how I would and then I'll do it the BEM way now a quick side note if for example we are our project here was a real project but it only included just a card like it's the world's most simple landing page and project we wouldn't need to use the BEM method because it wouldn't make sense it's so freaking simple we're not gonna run into the issues that you would face with like a large project or a medium-size project so just keep that in mind if you're dealing with an ultra ultra ultra simple project you don't have to use this methodology all right so we're gonna start off here with a class of card all right and this is actually consistent with the BEM way even though we just have one element so far this so this would be our block now next up I'm gonna have like an image just like in our little slide example I'm not gonna use an actual image though I'm just going to put in a span like that all right and again this is not the BEM way we're going to benefit shortly we'll also have a whole container to hold all of our type based content to give it padding so I'll call that I what's call it content in the form of a div next up we'll have maybe some breadcrumbs like a little navigation so we'll say ul Li and then we'll say I don't know maybe this is listing out software titles or something so this is Adobe XD this one will be figma and this one will be sketch all right and then perhaps we'll have a description so we'll say P and we will say lorem 20 just for 20 words of lorem ipsum generated text and then also maybe a button so aah Ref and will say visit to the link or something all right so we'll save this and this is not the BEM way of doing it this would not be correct but again if this were my only HTML in CSS that's not gonna be a part of this project I would reference it just like this because it's it's it's there's less code here to deal with and it's much easier we're not gonna run into issues of specific e and all that stuff I can never say it right specifically there we go all right so let's go ahead and do this the BEM way so we know first our block is the overall container of our card so this is what we're deciding to name it and this is the correct way of dealing with the block element when you're using the BEM approach next up we have an image in this case we're not using in an image we're just going to use the span element so this is an element as a part of the B e/m process because it's an element of card it's semantically tied to the card block so if you recall from the slides we gave it a class of card and then it's an element so it's two underscores and then the name of it in our case we're going to name it maybe image IMG for something like that next up this is going to be this this whole div class of content it's semantically semantically tied to this card so we're going to rename this to card underscore content all right next up we have this unordered list and the form of its gonna look kind of like a little breadcrumb tags if you will so this is also a part of the card it's semantically tied to the card so we're gonna say class equals card underscore underscore list we also do this with the list items so this is gonna be class equals card underscore underscore item because it's an item in the card and then for this one actually we're gonna leave that there for a second we are gonna change it so these are all both giving card items as well all right now let's say we wanted to Adobe XD to be highlighted maybe that's the current I software title that this take you to the blog post or whatever is about so we give this a modifier right BM modifier so we do that by saying card - - item which is what it's on and it's an element sorry it's it's a it's a modifier that is modifying an element in this case so we give the LM name element name and then - - because it's an element or a modifier rather and then we'll say active alright next up we have let me hit ctrl BD where that sidebar I we have this description card - - D ESC and then also a class of card - - link I guess we could call it you could call it button you know whatever or CTA for call to action and there is the BEM way of writing this now there's several different schools of thought when it comes to BEM and you know some people would say maybe some things could be changed about this but in a nutshell this is the approach to writing them in HTML now of course how do we reference all this stuff in CSS itself well it depends I are you going to be writing in a straight-up CSS file with a CSS extension or you're going to be using a process a preprocessor of like sass or something like that so sass can make your life a little bit easier and I'll show you the sass way of doing this and also what sass ends up producing from compiling or transpiling down to the regular CSS file so what we'll do is we're going to reference our block level element first and that is the card alright so we're going to give this just a padding of 0 on the top and bottom and 5 a.m. on the right and left just to push it away from the corner the browser there then we're going to use the staffs ampersand right here to append on to it our next element which is underscore underscore image or IMG so what this will ultimately do and I'll show you in the output CSS is it takes this ampersand we'll take the card name right here and just put it as a prefix on to image so it's just a shorthand method that way you don't have to manually write out card alright so an image for the image we'll just go ahead and say display:block we're gonna say a height of 100 pixels with 100 percent and background I'm going to give it a custom background here it's kind of a like a pinkish sort of hex code and we'll save it there we go so after saving this let's check the actual main dot CSS we'll see what it produces so that and that the ampersand sign is producing this rule set right here in the regular CSS all right so next up after that we have our card content so let's go back to our sass here so we'll do the same thing and we'll have content we'll get the content a little bit of padding inside and we'll say background white alright there we go it's coming along guys very exciting stuff underscored list here so we'll stay for the list list-style-type is none will say display flex make it a flex box so you do that automatically make some left or realign to each other and margin:0 padding:0 good stuff the list items themselves so we're gonna say an item because remember the names here are card item so again it's going back to the ampersand means whatever is specified here in this parent so card item would be I will say padding is 0.3 EEM and point 5 a.m. and then we'll say margin right 0.5 um background we're gonna make it slightly gray not this gray though a little bit too much contrast there there we go and then we'll also say border-radius we're just about done here 0.3 em fought size will be 0.85 um alright next up after that we're going to nest inside of here the modifier because if you recall the modifier is card item - active so to do that we'll say an oops it's not it's sorry it was - it was not - underscores like I was about to do it's - - because it's a modifier active and then we'll just a background d 4 d 4 d 4 and then font-weight:bold notice how it changes that just makes it slightly darker than the rest arguably arguably I could arguably I could pray make that a little bit darker but but no big deal you can see that it's active from from being bold and then finally we have our little let's see our link we have a description but I think the description looks good on its own so I'm gonna reference that so we just put here our next element which is link and for this next one I'm going to paste in the rule sets quite a bit of them because there's nothing really too exciting happening here so there's the link what if we wanted to make it hover I change color on hover rather very simple same thing background and I'll give that a color code as well and there we go all right so looking at this this is our CSS written in the BEM way and here's the HTML so if you were dealing with a larger project that had this block element as a part of it and you had some other classes and perhaps you had cards in a different page that are styled maybe slightly differently or you're using some other classes that exist in other areas and you start to change your CSS maybe at different times during the project and then all of a sudden things are changing in other areas of the app that you don't want it to well this is what helps ultimately for you to avoid that situation so let's take a look at the compiled CSS it's actually really simple just like that all right all right so hopefully now you have a real basic understanding of what them is of course there's a lot of other eye resources and other topics that are pertinent to it and if you start building a site using them you probably will come up with other questions that of course weren't answered here so you can always check out their forums I where you can post your questions and also find you know of course always google it I and you'll be well on your way to to understanding it as well as long as you're active and proactive and researching and keep on using it you know it's all about experience and trial and error all right so as always make sure to subscribe and I'll see you guys soon goodbye