BEM Cheat Sheet When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. I’ve used BEM, but after using it For a while I moved to component-scoped css, then finally settled on tailwind. It’s hard to explain why utility-first CSS works so well, but after using it for a while it just “clicks” and you feel how great it is to use. View Little astronaut used in BEM Naming Cheat Sheet. Little astronaut used in BEM Naming Cheat Sheet. View Technology & Design – Crafted with Love! Technology & Design – Crafted with Love! View Poster for the open source. Download The Free BEM Cheat Sheet. Want to start practicing BEM and looking for a no-nonsense, quick start action guide? Download a free cheat sheet covering BEM basics so you can dive in and start practicing today.
On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it all into a single stylesheet with SASS’s production settings, and then you aggregate it to get all the stylesheets from modules into a nice tidy package.
However, when it comes to larger, more complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do. This becomes especially important when you’re working with teams of themers, and when high performance is essential.
This is also true for long-term projects with legacy code (read 'How to Scale and Maintain Legacy CSS with Sass and SMACSS' — some nice SMACSS and BEM mixing in there).
Methodologies
There are plenty of methodologies out there aiming to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. This is obvious in large projects like Twitter, Facebook and Github, but other projects often grow into some “Huge CSS file” state pretty quickly.
OOCSS
Separating container and content with CSS “objects”SMACSS
Style-guide to write your CSS with five categories for CSS rulesSUITCSS
Structured class names and meaningful hyphensAtomic
Breaking down styles into atomic, or indivisible, piecesWhy BEM over the others?
No matter what methodology you choose to use in your projects, you will benefit from the advantages of more structured CSS and UI. Some styles are less strict and more flexible, while others are easier to understand and adapt in a team.
The reason I choose BEM over other methodologies comes down to this: it is less confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognizable terminology.
Blocks, Elements and Modifiers
You will not be surprised to hear that BEM is an abbreviation of the key elements of the methodology — Block, Element and Modifier. BEM’s strict naming rules can be found here.
Block
Standalone entity that is meaningful on its own.
Examples
header
, container
, menu
, checkbox
, input
Element
A part of a block that has no standalone meaning and is semantically tied to its block.
Examples
menu item
, list item
, checkbox caption
, header title
Modifier
A flag on a block or element. Use them to change appearance or behavior.
Examples
disabled
, highlighted
, checked
, fixed
, size big
, color yellow
Under the hood
Let’s look how one particular element on a page can be implemented in BEM. We will take
button
from GitHub:We can have a normal button for usual cases, and two more states for different ones. Because we style blocks by class selectors with BEM, we can implement them using any tags we want (
button
, a
or even div
). The naming rules tell us to use block--modifier-value
syntax.Benefits
Modularity
Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.
You also get the ability to transfer blocks from your finished projects to new ones.
Reusability
Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.
With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.
Structure
BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
Further Reading
- MindBEMding — getting your head ’round BEM syntax
- Used and Abused — CSS Inheritance and Our Misuse of the Cascade.
- Objects in Space — A style-guide for modular SASS development using SMACSS and BEM
Case study
We hope to write 'How to migrate an existing project to BEM' soon. In the meantime you can watch this nice presentation by Nicole Sullivan — 'CSS preprocessor performance'. She gives a very good overview of the problems she encounters in the majority of websites and offers ways to track them down and handle them.
There are always ways to make the coding and design work you do faster and more efficient. With that in mind, i have put together a list of the most useful cheatsheets designer and developer can rely on.
Bem Cheat Sheet Pdf
Unleash The Power of WordPress Ad
Awesome collection of 11,000+ WordPress Themes, including Bootstrap Templates & Design Assets
Business
WordPressBlog & Magazine
WordPressCreative Portfolio
WordPressEcommerce
WordPressLanding Page
WordPressRetail
WordPressShortcuts.design
Shortcuts.design is a small website that lists every shortcut a designer ever wants to know, all designapps in one place and in a simple and clear way. It’s very usefull for beginning designers to quickly charge their workflow, when you switched to a new designtool or when you just want a reference to see which shortcut to use for that action you have to do all day long.
BEM
Bem Cheat Sheet 2020
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don’t always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components.
Grid Cheatsheet
Demos for W3C CSS Grid Specification.
i Hate Regex
This tool is designed as a cheatsheet that will explain commonly used regular expressions in way you actually learn it.
GitSheet
GitSheet is a simple git cheat sheet reference for common git commands saving you time and helping you learn how to use branches, show logs, undo changes, create tags, stashes and more. Commands are a click away from clipboard.
Awesome-Cheatsheets
Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
Modern JS Cheatsheet
Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
Font Awesome Cheatsheet
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. Here is a Font Awesome cheat sheet of all the content values for each icon.
HTML5/CSS3 Cheatsheet
Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently usable across a number of web browsers, chief among them Firefox, Safari, Chrome, Opera and the upcoming IE9. For many of the CSS3 examples, older versions of Internet Explorer are the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind.
Favicon Cheat-sheet
Favicons have been handy for web browsers for years. However, with the proliferation of devices (not talking just computers and mobiles here), you need to keep up with your favicon optimization (never thought I’d type that). Here’s a nifty “cheat sheet” that walks you through proper sizes for everything from iOS and Android to the Chrome browser to GoogleTV and iPad.
Web Developer’s SEO Cheat Sheet
This free and downloadable document covers all of the important SEO code and best practices that are needed by online marketers and developers.
The Ultimate Flexbox Cheat Sheet
Flexbox is a brand, spankin’ new CSS layout module with suprisingly good browser support! Say goodbye to float frustration and hello to a brave new world of easy vertical centering, re-ordering elements and dynamically growing and shrinking layouts.
Easing Functions Cheat Sheet
Simple cheat sheet to help developers pick the right easing function.
The iOS Design Cheat Sheet
These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.
Android Cheatsheet for Graphic Designers
Graphic designers aren’t programmers and sometimes don’t know how to properly prepare graphic assets for developers. This simple cheatsheet should help them to do their job better, and to simplify developers’ lives.
CSS3 animation
The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
Graphic Design Cheat Sheets to Make Your Life Easier
Beginners and experienced designers alike often get help from graphic design cheat sheets. They’re also called crib sheets, and are very worthwhile if you get stuck in the middle of the design process and don’t know where to turn. Keep reading to learn about seven cheat sheets that you might want to bookmark right now, so you can whip them out when you need them!
Cheatsheet
Vue.js 2.2 complete API cheatsheet.
Regex Cheat Sheet
Emma Wedekind’s useful cheat sheet for creating regular expressions.
Css Grid-cheat-sheet
Another helpful tool for using CSS Grid properties. By Ali Alaa.
React Hooks-cheatsheet
React hooks cheatsheet with live editable examples.
React Cheat Sheet
A very useful filterable cheat sheet for React made by Michael Chan.
Type Terms
Type Terms is the perfect tool for designers to learn the basics of typographic terminology. If you are new to typography or here to refresh your memory, then Type Terms is perfect for you.
10 cheat codes for designing User Interfaces
It is a process that has a “Why” behind it, that whenever we create a text bigger, add a shadow, or change the color, there has to be a reason of why things have to be.
Bootstrap 4 Cheat Sheet
An update to the very useful Bootstrap 4 cheat sheet that serves as a great reference.
Grid “fallbacks” and overrides
Here is a quick reference to the defined overrides with simple examples. See the resources at the end of this cheatsheet for more advice and examples.
Math As-code
A cheat-sheet for mathematical notation in code form.
ES6 Cheatsheet
This is an interactive ES6, ES2016, and ES2017 cheatsheet. It uses a series of small examples to show you the important parts of modern JavaScript. All code is editable and runnable so you can play with it all you want.
Async Javascript Cheatsheet
This cheatsheet contains a summary of the Mastering Asynchronous JavaScript course at Frontend Armory.
CSS Selectors Cheatsheet
Grid
Learn all about the properties available in CSS Grid Layout through simple visual examples.
Emoji Cheat-sheet.com
Emojis enhance just about any user experience. They always have a place, from casual social media use to top level inbound marketing strategies.
Git and Git Flow Cheat Sheet
Bem Cheat Sheet Printable
Git cheat sheet saves you from learning all the commands by heart.