What is getbem.github.io?

getbem/getbem.github.io — explained in plain English

Analysis updated 2026-06-26

★ 5,747MDXAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((GetBEM))
    What it explains
      BEM naming
      Block concept
      Element concept
      Modifier concept
    Tech stack
      Astro
      MDX
    Purpose
      CSS education
      Frontend best practices
    Audience
      Beginners
      Frontend developers

mindmap root((GetBEM)) What it explains BEM naming Block concept Element concept Modifier concept Tech stack Astro MDX Purpose CSS education Frontend best practices Audience Beginners Frontend developers

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Learn the BEM naming convention to write more organized, maintainable CSS stylesheets.

USE CASE 2

Contribute corrections or improvements to the getbem.com documentation site.

USE CASE 3

Use as a teaching reference when explaining CSS naming conventions to new frontend developers.

What is it built with?

AstroMDXJavaScript

How does it compare?

	getbem/getbem.github.io	phuocng/1loc	cloudflare/cloudflare-docs
Stars	5,747	6,744	4,715
Language	MDX	MDX	MDX
Setup difficulty	easy	easy	easy
Complexity	1/5	1/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

This repository holds the source code for getbem.com, a website that explains BEM to a general audience. BEM stands for Block, Element, Modifier and is a naming convention for writing CSS, the code that controls how web pages look. The idea behind BEM is to give CSS classes structured, predictable names so that developers working on a project can understand what each piece of styling does and where it belongs, without digging through all the code. The site itself is built with Astro, a framework for generating static websites. The repository structure follows standard Astro conventions: pages live in src/pages/, reusable pieces go in src/components/, and static files like images go in public/. Building and previewing the site is done with standard npm commands. The README in this repository is the default Astro starter template README and does not describe the content of the site itself. Based on the repository name and description, the project's purpose is to make BEM accessible and easy to understand for people learning frontend web development. The actual explanatory content of the site lives in the MDX and Astro files within the repository rather than in the README. If you want to understand what BEM is, the intended destination is the live site at getbem.com rather than this repository.

Copy-paste prompts

Prompt 1

Explain BEM naming for CSS like I am a beginner, and show me three examples of block, element, and modifier class names.

Prompt 2

I am building a card component in CSS. How would I name the block, image, title, and a featured-variant class using BEM?

Prompt 3

What are the main benefits of BEM over plain CSS class naming, and when might it not be the right choice?

Frequently asked questions