title
You Probably Need BEM CSS in Your Life (Tutorial)

description
Visit http://linode.com/designcourse for a $20 credit on your new linode account. https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, we're going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it's an approach to defining and structuring your CSS. When you're dealing with medium to large size projects, it helps you develop a maintainable code base and one that doesn't run into issues with specificity. While this is a beginner's level tutorial, we will be jumping into more intermediate and advanced tutorials later on down the road. Codepen demo for this tutorial: https://codepen.io/designcourse/pen/KKwjKNE Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'You Probably Need BEM CSS in Your Life (Tutorial)', 'heatmap': [{'end': 771.84, 'start': 747.364, 'weight': 1}], 'summary': 'This tutorial introduces the bem methodology for writing html and css, emphasizing its benefits for managing code in serious projects. it also covers linode hosting solutions, offering practical coding demonstrations and creating card markup using bem principles.', 'chapters': [{'end': 104.857, 'segs': [{'end': 86.962, 'src': 'embed', 'start': 25.745, 'weight': 0, 'content': [{'end': 28.167, 'text': "And you're probably thinking is that auto-generated or something??", 'start': 25.745, 'duration': 2.422}, {'end': 35.231, 'text': "And no, it's basically people who are following the BEM methodology to writing their HTML and CSS.", 'start': 28.607, 'duration': 6.624}, {'end': 44.297, 'text': "So if you check out this em.bem.info on the main site, it'll tell you and give you more information about what exactly this is.", 'start': 35.631, 'duration': 8.666}, {'end': 45.918, 'text': 'But in a nutshell,', 'start': 44.617, 'duration': 1.301}, {'end': 56.463, 'text': "basically if you're dealing with a project that is a serious project that has multiple pages and a bunch of rule sets and html selectors,", 'start': 46.658, 'duration': 9.805}, {'end': 67.789, 'text': "it can be difficult to maintaining that code and writing that code because you can run into issues of what's called specificity and you maybe perhaps you're changing css in one area of the app,", 'start': 56.463, 'duration': 11.326}, {'end': 72.851, 'text': 'but somehow it starts affecting another area and it becomes kind of confusing on how to deal with it.', 'start': 67.789, 'duration': 5.062}, {'end': 80.917, 'text': "well, that's one of the several advantages to using the bem method, because it helps avoid issues like that as much as possible.", 'start': 72.851, 'duration': 8.066}, {'end': 86.962, 'text': "So initially I'm going to go through a few slides here, just to give you a real broad understanding of what it is.", 'start': 81.397, 'duration': 5.565}], 'summary': 'Bem methodology helps in maintaining complex projects by avoiding specificity issues and confusion in code. visit em.bem.info for more information.', 'duration': 61.217, 'max_score': 25.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ25745.jpg'}], 'start': 0.169, 'title': 'Introduction to bem methodology', 'summary': 'Introduces the bem methodology for writing html and css, emphasizing its benefits in managing code for serious projects with multiple pages and rule sets, aiming to avoid specificity issues and unintended side effects.', 'chapters': [{'end': 104.857, 'start': 0.169, 'title': 'Introduction to bem methodology', 'summary': 'Introduces the bem methodology for writing html and css, highlighting its advantages in maintaining and managing code for serious projects with multiple pages and rule sets, aiming to avoid issues of specificity and unintended side effects.', 'duration': 104.688, 'highlights': ['The BEM methodology helps in maintaining and managing code for serious projects with multiple pages and rule sets, aiming to avoid issues of specificity and unintended side effects.', 'Using BEM can help in avoiding issues of specificity and unintended side effects when dealing with a project that has multiple pages and a bunch of rule sets and html selectors.', 'The BEM methodology is aimed at beginners and provides a broad understanding of writing HTML and CSS following the block element modifier approach.', 'The BEM methodology aims to provide an in-depth understanding of writing HTML and CSS, particularly for beginners.']}], 'duration': 104.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ169.jpg', 'highlights': ['The BEM methodology helps in maintaining and managing code for serious projects with multiple pages and rule sets, aiming to avoid issues of specificity and unintended side effects.', 'Using BEM can help in avoiding issues of specificity and unintended side effects when dealing with a project that has multiple pages and a bunch of rule sets and html selectors.', 'The BEM methodology is aimed at beginners and provides a broad understanding of writing HTML and CSS following the block element modifier approach.', 'The BEM methodology aims to provide an in-depth understanding of writing HTML and CSS, particularly for beginners.']}, {'end': 393.097, 'segs': [{'end': 134.206, 'src': 'embed', 'start': 105.017, 'weight': 0, 'content': [{'end': 107.52, 'text': "Now as always, make sure to subscribe and let's get started.", 'start': 105.017, 'duration': 2.503}, {'end': 114.147, 'text': 'Before we begin Linode makes it easy and affordable to host your website, your portfolio, your online store and more,', 'start': 107.86, 'duration': 6.287}, {'end': 115.829, 'text': 'on whatever technology stack you use.', 'start': 114.147, 'duration': 1.682}, {'end': 119.773, 'text': 'Getting up and running is fast and easy with one-click app installs like WordPress and Drupal.', 'start': 115.989, 'duration': 3.784}, {'end': 123.878, 'text': 'With backend access to your server, customization and scaling options are all but limitless.', 'start': 120.033, 'duration': 3.845}, {'end': 128.661, 'text': 'if you just need something small like an online portfolio to showcase your work, linode has you covered.', 'start': 124.358, 'duration': 4.303}, {'end': 134.206, 'text': 'if you need to manage tons of clients, websites and reliably serve them to millions of visitors, linode can do that too.', 'start': 128.661, 'duration': 5.545}], 'summary': 'Linode offers fast, easy, and affordable hosting with limitless customization and scaling options for websites and portfolios.', 'duration': 29.189, 'max_score': 105.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ105017.jpg'}, {'end': 175.667, 'src': 'embed', 'start': 152.099, 'weight': 3, 'content': [{'end': 158.982, 'text': "so of course it stands for block first for the B, and that's a standalone entity that is a meaningful on its own.", 'start': 152.099, 'duration': 6.883}, {'end': 165.304, 'text': 'And these, these definitions of these three elements come straight from them itself or the official documentation.', 'start': 159.022, 'duration': 6.282}, {'end': 172.546, 'text': "Um, element of course is the E and that's a part of a block that has no standalone meaning and is semantically tied to its own block.", 'start': 165.964, 'duration': 6.582}, {'end': 173.286, 'text': 'All right.', 'start': 173.046, 'duration': 0.24}, {'end': 175.667, 'text': "So this all, this stuff's all going to make sense here shortly though.", 'start': 173.306, 'duration': 2.361}], 'summary': 'Defining b and e elements in a block, based on official documentation.', 'duration': 23.568, 'max_score': 152.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ152099.jpg'}, {'end': 241.261, 'src': 'embed', 'start': 212.164, 'weight': 5, 'content': [{'end': 219.629, 'text': 'so the block itself is the card, all right, and we can name that block whatever we want, whatever makes sense.', 'start': 212.164, 'duration': 7.465}, {'end': 222.551, 'text': "card right, it's a card, duh, all right.", 'start': 219.629, 'duration': 2.922}, {'end': 224.493, 'text': 'so what would this photograph be?', 'start': 222.551, 'duration': 1.942}, {'end': 233.038, 'text': "Well, it's an element, because it's going to be inside of that block and it's tied semantically to this block element.", 'start': 225.976, 'duration': 7.062}, {'end': 241.261, 'text': 'And the way you designate what an element is, is based on the block class card name.', 'start': 233.618, 'duration': 7.643}], 'summary': 'The block is called a card, and the photograph is an element tied to the block class card name.', 'duration': 29.097, 'max_score': 212.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ212164.jpg'}, {'end': 398.296, 'src': 'embed', 'start': 375.231, 'weight': 4, 'content': [{'end': 382.913, 'text': "I'm using SAS for this, by the way, which I've already ran with the SAS live compilation extension, which you can install over here if you wish.", 'start': 375.231, 'duration': 7.682}, {'end': 387.435, 'text': "And I'm going to use SAS just to show you the SAS way of dealing with BEM, or B-E-M.", 'start': 383.494, 'duration': 3.941}, {'end': 393.097, 'text': 'And I only have these two rule sets here just to put a basic background font.', 'start': 388.095, 'duration': 5.002}, {'end': 398.296, 'text': 'and also display grid to put our card in the center vertically and horizontally over here.', 'start': 393.553, 'duration': 4.743}], 'summary': 'Using sas to demonstrate bem with basic font and display grid.', 'duration': 23.065, 'max_score': 375.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ375231.jpg'}], 'start': 105.017, 'title': 'Linode hosting solutions and bem methodology', 'summary': 'Introduces linode as an easy and affordable hosting solution, offering one-click app installs, backend access, and scalability. it also explains the bem methodology, defining each element and providing a real-life example, emphasizing naming conventions and offering practical coding demonstration using html and sass.', 'chapters': [{'end': 134.206, 'start': 105.017, 'title': 'Linode hosting solutions', 'summary': 'Introduces linode as an easy and affordable hosting solution for websites and online stores, offering one-click app installs, backend access for customization, and scalability to manage a small online portfolio or serve millions of visitors.', 'duration': 29.189, 'highlights': ['Linode offers one-click app installs like WordPress and Drupal for fast and easy website setup. Linode provides one-click app installs like WordPress and Drupal, enabling fast and easy website setup.', 'Backend access to the server allows for customization and scaling options. Linode offers backend access to the server, providing customization and scaling options for the hosted websites.', 'Linode can manage small online portfolios as well as serve websites to millions of visitors reliably. Linode can handle small online portfolios and reliably serve websites to millions of visitors.']}, {'end': 393.097, 'start': 134.206, 'title': 'Understanding bem methodology', 'summary': 'Explains the bem (block, element, modifier) methodology, defining each element and providing a real-life example, emphasizing the importance of naming conventions and offering practical coding demonstration using html and sass.', 'duration': 258.891, 'highlights': ['Explaining BEM (Block, Element, Modifier) methodology Defines BEM as Block, Element, and Modifier, emphasizing the importance of each element and its naming convention.', 'Real-life example of BEM methodology with a card Provides a practical example of applying BEM methodology to a card, illustrating the naming conventions for block, element, and modifier.', 'Practical coding demonstration using HTML and SASS Demonstrates the practical implementation of BEM methodology in coding using HTML and SASS, highlighting the importance of proper naming conventions.']}], 'duration': 288.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ105017.jpg', 'highlights': ['Linode offers one-click app installs like WordPress and Drupal for fast and easy website setup.', 'Linode can handle small online portfolios and reliably serve websites to millions of visitors.', 'Backend access to the server allows for customization and scaling options.', 'Explaining BEM (Block, Element, Modifier) methodology Defines BEM as Block, Element, and Modifier, emphasizing the importance of each element and its naming convention.', 'Practical coding demonstration using HTML and SASS Demonstrates the practical implementation of BEM methodology in coding using HTML and SASS, highlighting the importance of proper naming conventions.', 'Real-life example of BEM methodology with a card Provides a practical example of applying BEM methodology to a card, illustrating the naming conventions for block, element, and modifier.']}, {'end': 1125.917, 'segs': [{'end': 437.859, 'src': 'embed', 'start': 408.543, 'weight': 1, 'content': [{'end': 416.869, 'text': "So we're going to create the standard markup, not the Bemway, of just creating a card HTML write-up.", 'start': 408.543, 'duration': 8.326}, {'end': 423.153, 'text': "And so what I'm going to do is first write it normally how I would, and then I'll do it the Bemway.", 'start': 417.469, 'duration': 5.684}, {'end': 426.154, 'text': 'Now, a quick side note.', 'start': 423.673, 'duration': 2.481}, {'end': 434.538, 'text': 'If, for example, we are, our project here was a real project, but it only included just a card.', 'start': 426.934, 'duration': 7.604}, {'end': 437.859, 'text': "like it's the world's most simple landing page and project.", 'start': 434.538, 'duration': 3.321}], 'summary': 'Creating a standard markup for a simple landing page with just a card, illustrating the bemway approach.', 'duration': 29.316, 'max_score': 408.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ408543.jpg'}, {'end': 492.603, 'src': 'embed', 'start': 460.154, 'weight': 2, 'content': [{'end': 462.976, 'text': "So we're going to start off here with a class of card.", 'start': 460.154, 'duration': 2.822}, {'end': 464.377, 'text': 'All right.', 'start': 464.117, 'duration': 0.26}, {'end': 470.542, 'text': 'And this is actually consistent with the BEM way, even though we just have one element so far.', 'start': 465.198, 'duration': 5.344}, {'end': 471.783, 'text': 'So this would be our block.', 'start': 470.722, 'duration': 1.061}, {'end': 476.286, 'text': "Now, next up, I'm going to have like an image, just like in our little slide example.", 'start': 472.383, 'duration': 3.903}, {'end': 478.407, 'text': "I'm not going to use an actual image though.", 'start': 476.806, 'duration': 1.601}, {'end': 481.369, 'text': "I'm just going to put in a span like that.", 'start': 478.487, 'duration': 2.882}, {'end': 482.01, 'text': 'All right.', 'start': 481.73, 'duration': 0.28}, {'end': 486.519, 'text': "And again, this is not the Bemway, we're gonna Bemify it shortly.", 'start': 483.237, 'duration': 3.282}, {'end': 492.603, 'text': "We'll also have a whole container to hold all of our type-based content to give it padding.", 'start': 487.4, 'duration': 5.203}], 'summary': 'Creating a card component with elements and a container for type-based content.', 'duration': 32.449, 'max_score': 460.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ460154.jpg'}, {'end': 584.358, 'src': 'embed', 'start': 556.442, 'weight': 3, 'content': [{'end': 559.504, 'text': "We're not going to run into issues of specificity and all of that stuff.", 'start': 556.442, 'duration': 3.062}, {'end': 560.865, 'text': 'I can never say it right.', 'start': 560.124, 'duration': 0.741}, {'end': 561.966, 'text': 'Specificity There we go.', 'start': 560.945, 'duration': 1.021}, {'end': 565.427, 'text': "Alright, so let's go ahead and do this the BEM way.", 'start': 562.566, 'duration': 2.861}, {'end': 570.809, 'text': 'So we know first our block is the overall container of our card.', 'start': 565.467, 'duration': 5.342}, {'end': 578.532, 'text': "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.", 'start': 571.369, 'duration': 7.163}, {'end': 580.616, 'text': 'Next up, we have an image.', 'start': 579.375, 'duration': 1.241}, {'end': 583.037, 'text': "In this case, we're not using an image.", 'start': 581.196, 'duration': 1.841}, {'end': 584.358, 'text': "We're just going to use the span element.", 'start': 583.077, 'duration': 1.281}], 'summary': 'Discussion on using the bem approach for naming and structuring elements in a card layout.', 'duration': 27.916, 'max_score': 556.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ556442.jpg'}, {'end': 630.396, 'src': 'embed', 'start': 602.15, 'weight': 0, 'content': [{'end': 605.352, 'text': "In our case, we're going to name it maybe image, IMG for something like that.", 'start': 602.15, 'duration': 3.202}, {'end': 611.656, 'text': 'Next up, this is going to be this whole div class of content.', 'start': 606.229, 'duration': 5.427}, {'end': 620.187, 'text': "It's semantically tied to this card, so we're going to rename this to card underscore content.", 'start': 612.097, 'duration': 8.09}, {'end': 627.153, 'text': "Next up, we have this unordered list in the form of, it's gonna look kind of like little breadcrumb tags, if you will.", 'start': 621.949, 'duration': 5.204}, {'end': 630.396, 'text': 'So this is also a part of the card.', 'start': 627.694, 'duration': 2.702}], 'summary': 'Renaming elements: img, card_content. adding breadcrumb tags to card.', 'duration': 28.246, 'max_score': 602.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ602150.jpg'}, {'end': 771.84, 'src': 'heatmap', 'start': 747.364, 'weight': 1, 'content': [{'end': 758.171, 'text': "and i'll show you the sass way of doing this and also what sass ends up producing from um compiling or transpiling down to the regular css file.", 'start': 747.364, 'duration': 10.807}, {'end': 764.115, 'text': "so What we'll do is we're going to reference our block level element first, and that is the card.", 'start': 758.171, 'duration': 5.944}, {'end': 765.796, 'text': 'All right.', 'start': 765.456, 'duration': 0.34}, {'end': 771.84, 'text': "so we're going to give this just a padding of 0 on the top and bottom and 5em on the right and left,", 'start': 765.796, 'duration': 6.044}], 'summary': 'Demonstrating sass compilation of padding for a block-level element.', 'duration': 24.476, 'max_score': 747.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ747364.jpg'}, {'end': 1052.064, 'src': 'embed', 'start': 1019.476, 'weight': 4, 'content': [{'end': 1020.116, 'text': 'Very simple.', 'start': 1019.476, 'duration': 0.64}, {'end': 1020.816, 'text': 'Same thing.', 'start': 1020.276, 'duration': 0.54}, {'end': 1024.358, 'text': "Background And I'll give that a color code as well.", 'start': 1021.337, 'duration': 3.021}, {'end': 1029.56, 'text': 'And there we go.', 'start': 1025.498, 'duration': 4.062}, {'end': 1030.861, 'text': 'All right.', 'start': 1030.58, 'duration': 0.281}, {'end': 1036.537, 'text': 'So Looking at this, this is our CSS written in the BEM way.', 'start': 1031.281, 'duration': 5.256}, {'end': 1041.542, 'text': "And here's the HTML.", 'start': 1036.557, 'duration': 4.985}, {'end': 1052.064, 'text': '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,', 'start': 1043.038, 'duration': 9.026}], 'summary': 'Transcript covers css in bem format with html examples.', 'duration': 32.588, 'max_score': 1019.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ1019476.jpg'}, {'end': 1111.341, 'src': 'embed', 'start': 1078.046, 'weight': 5, 'content': [{'end': 1080.589, 'text': "so let's take a look at the compiled CSS.", 'start': 1078.046, 'duration': 2.543}, {'end': 1088.105, 'text': "it's actually really simple, just like that, All right.", 'start': 1080.589, 'duration': 7.516}, {'end': 1088.726, 'text': 'All right.', 'start': 1088.385, 'duration': 0.341}, {'end': 1092.428, 'text': 'So hopefully now you have a real basic understanding of what BEM is.', 'start': 1088.766, 'duration': 3.662}, {'end': 1098.352, 'text': "Of course, there's a lot of other resources and other topics that are pertinent to it.", 'start': 1092.528, 'duration': 5.824}, {'end': 1104.196, 'text': "And if you start building a site using BEM, you probably will come up with other questions that of course weren't answered here.", 'start': 1098.432, 'duration': 5.764}, {'end': 1111.341, 'text': 'So you can always check out their forums where you can post your questions and also find, you know, of course, always Google it.', 'start': 1105.097, 'duration': 6.244}], 'summary': 'Introduction to bem css methodology with resources for further learning.', 'duration': 33.295, 'max_score': 1078.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ1078046.jpg'}], 'start': 393.553, 'title': 'Creating card markup with bem method and introduction to bem html and css', 'summary': 'Outlines the process of creating a card html write-up using the bem methodology, emphasizing the consistent use of bem principles and adding image, content, breadcrumbs, description, and a button. it also explains the bem approach for html and css, demonstrating the correct way of naming block, element, and modifier classes and how to write bem structured css using sass.', 'chapters': [{'end': 532.45, 'start': 393.553, 'title': 'Creating card markup with bem method', 'summary': 'Outlines the process of creating a card html write-up using the bem methodology, highlighting the simplicity of the project and the consistent use of bem principles, along with the addition of image, content, breadcrumbs, description, and a button.', 'duration': 138.897, 'highlights': ['The BEM methodology is introduced for creating a card HTML write-up, emphasizing its relevance for large or medium-sized projects.', "The consistent use of BEM principles is demonstrated, even for a simple project with just one element, as the class 'card' is identified as the block.", 'The addition of image, content, breadcrumbs, description, and a button is planned for the card markup, showcasing the comprehensive nature of the design process.']}, {'end': 1125.917, 'start': 532.93, 'title': 'Introduction to bem html and css', 'summary': 'Explains the bem approach for html and css, demonstrating the correct way of naming block, element, and modifier classes, and how to write bem structured css using sass, aiming to help developers understand and implement bem effectively in their projects.', 'duration': 592.987, 'highlights': ['The correct way of naming block, element, and modifier classes in BEM The chapter explains the BEM approach for HTML and CSS, demonstrating the correct way of naming block, element, and modifier classes', 'Writing BEM structured CSS using SASS The chapter demonstrates how to write BEM structured CSS using SASS, with specific examples of appending block names and nesting elements and modifiers', 'Purpose of BEM in avoiding conflicts and maintaining code consistency in larger projects The chapter emphasizes the purpose of BEM in avoiding conflicts and maintaining code consistency in larger projects, with the compiled CSS being simple and effective in achieving this goal']}], 'duration': 732.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/er1JEDuPbZQ/pics/er1JEDuPbZQ393553.jpg', 'highlights': ['The addition of image, content, breadcrumbs, description, and a button is planned for the card markup, showcasing the comprehensive nature of the design process.', 'The BEM methodology is introduced for creating a card HTML write-up, emphasizing its relevance for large or medium-sized projects.', "The consistent use of BEM principles is demonstrated, even for a simple project with just one element, as the class 'card' is identified as the block.", 'The chapter explains the BEM approach for HTML and CSS, demonstrating the correct way of naming block, element, and modifier classes.', 'The chapter demonstrates how to write BEM structured CSS using SASS, with specific examples of appending block names and nesting elements and modifiers.', 'The chapter emphasizes the purpose of BEM in avoiding conflicts and maintaining code consistency in larger projects, with the compiled CSS being simple and effective in achieving this goal.']}], 'highlights': ['The BEM methodology helps in maintaining and managing code for serious projects with multiple pages and rule sets, aiming to avoid issues of specificity and unintended side effects.', 'The chapter emphasizes the purpose of BEM in avoiding conflicts and maintaining code consistency in larger projects, with the compiled CSS being simple and effective in achieving this goal.', 'Practical coding demonstration using HTML and SASS Demonstrates the practical implementation of BEM methodology in coding using HTML and SASS, highlighting the importance of proper naming conventions.', 'The BEM methodology is introduced for creating a card HTML write-up, emphasizing its relevance for large or medium-sized projects.', 'Linode can handle small online portfolios and reliably serve websites to millions of visitors.', 'The addition of image, content, breadcrumbs, description, and a button is planned for the card markup, showcasing the comprehensive nature of the design process.']}