Learn CSS BEM (and avoid these common mistakes) скачать в хорошем качестве

Learn CSS BEM (and avoid these common mistakes)

In this video, we're diving into BEM, which stands for Block Element Modifier—a popular semantic CSS methodology. We'll break down the basics of BEM, including blocks, elements, and modifiers, and show you how they all work together. Plus, we'll cover some of the common questions people have and highlight mistakes to avoid. CodePen: https://codepen.io/dmtrmrv/pen/vYMEGpx Chapters: 00:00 – Intro 00:14 – What are CSS Methodologies? 00:49 – What is BEM? 01:13 – What is a Block? 01:59 – How to Name Blocks 02:37 – Semantic vs. Functional Blocks 03:00 – What is an Element? 04:14 – CSS Implementation of Blocks and Elements 04:44 – What is a Modifier? 05:49 – Can I Use a Modifier with an Element? 06:33 – Should I Use a Modifier or Create a New Block? 08:20 – Can a Block Be an Element at the Same Time? 08:59 – Can a Block Be Another Block at the Same Time? 09:50 – Can I Use Utility Classes with BEM? 11:03 – Don't Use Margins on Blocks 12:41 – Don't Nest Classes in CSS 13:23 – Don't Use BEM Entities as Utility Classes 13:53 – Don't Create Elements of Elements 14:22 – Don't Create Blocks with Too Many or Too Few Elements 15:11 – Wrapping Up and Thank You for 100 Subscribers!