Naming conventions in CSS - Browser Rendering Trace

Render Flow - Naming conventions

[Write CSS selectors] -> [Apply naming rules] -> [Match HTML elements] -> [Apply styles] -> [Render visual styles]

The browser reads CSS selectors with specific naming conventions, matches them to HTML elements, then applies the styles to render the page visually.

Render Steps - 3 Steps

Code Added:No CSS applied yet

Before

[ btn-primary ]
  Click me

→

After

[ btn-primary ]
  Click me

The button text appears with default browser styles, no color or padding.

🔧 Browser Action:Parse HTML, build DOM tree

Code Sample

A blue button with white text styled using a clear, descriptive class name following naming conventions.

CSS

<div class="btn-primary">Click me</div>

CSS

.btn-primary {
  background-color: blue;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the button?

A Button text turns white on a blue background

B Button text disappears

C Button background becomes transparent

D Button text turns black on a white background

Common Confusions - 2 Topics

Why does my CSS not apply when I use spaces in class names?

Spaces separate multiple classes in HTML. A class name cannot contain spaces. Use hyphens or underscores instead.

💡 Class names are one word or connected by hyphens/underscores, never spaces.

Why is my CSS selector too generic and affects unwanted elements?

Using simple names like .button can style many elements. Naming conventions like BEM add specificity to avoid this.

💡 Use descriptive, structured names to target only intended elements.

Property Reference

Naming Convention	Example	Visual Effect	Why Use It
BEM (Block__Element--Modifier)	.btn__icon--small	Clear structure, easy to style parts	Keeps CSS organized and scalable
Hyphen-case	.btn-primary	Readable class names	Common and easy to type
CamelCase	.btnPrimary	No visual effect	Used in JS but less common in CSS
Snake_case	.btn_primary	No visual effect	Less common, can be confusing

Concept Snapshot

Naming conventions help keep CSS organized and readable. Common styles: hyphen-case (.btn-primary), BEM (.block__element--modifier). Good names describe purpose and structure. Avoid spaces in class names. Clear naming prevents unwanted style conflicts.