How to control scope in BEM with Sass?
We’ve taken inspiration from JavaScript to control scope in our BEM components with Sass by using this little snippet at the root: $self: &. With the scope control, we gain flexibility to write clean, organized, BEM driven CSS when we are deep in a modifier or child element. I hope this little tip will help you to improve your Sass.
What do Bem and Block mean in CSS?
BEM = Block Element Modifier, is a methodology that helps you to achieve reusable components and code sharing in the front-end. BEM is a simple (not at first sight) naming convention to make our front end code easier to work with and easier to scale. BLOCK: Standalone entity that is meaningful on its own.
How to create a BEM modifier in CSS?
First, let’s start with that same markup and some core styles. This gives us a nice purple square with a white circle inside it. Nothing groundbreaking, but useful for this example. You’ll probably notice that we’re using BEM syntax, so let’s go ahead and create a modifier.
What’s the difference between a BEM and an element?
BEM is a simple (not at first sight) naming convention to make our front end code easier to work with and easier to scale. BLOCK: Standalone entity that is meaningful on its own. ELEMENT: Parts of a block that don’t have standalone meaning. They are semantically tied to its block. MODIFIER: Flag on blocks or elements.
What does the BEM mean in CSS architecture?
BEM or Block-Element-Modifier is a methodology which tells how to properly give naming conventions to your CSS classes. This will lead to the creation of modular and reusable UI components. Block are standalone entities that are meaningful on its own.
What can be used as an alternative to Sass?
SASS, a.k.a, Syntactically Awesome StyleSheets is a CSS extension with lots of multiple features that help manage and optimize your CSS codebase to a great extent. There are other such CSS preprocessors like LESS, Stylus which can also be used as an alternative to SASS.