CSS class

As explained in Tiny CSS Projects

A class name is an identifier assigned to an HTML element's class attribute for grouping elements and targeting them with CSS.

A CSS class is a name assigned through an HTML element’s class attribute. CSS uses that name to group elements and target them with selectors, making styles easier to organize and maintain. Clear names based on an element’s content or purpose are easier to understand than names based only on appearance. section 8.6

Opening a share menu

A share component can begin with a hidden menu styled by .share__menu. When the Share button is clicked, JavaScript toggles the share_expanded class on the container. The selector .share_expanded .share__menu then gives the menu a width of 200px and adds horizontal padding, revealing the links. The modifier name describes the component’s open state rather than a permanent visual feature. section 11.6.2 section 11.6.2

Use CSS classes to:

• Group related elements under a shared style. section 8.6
• Represent a temporary state, such as an expanded component. section 11.6.2
• Follow a naming convention such as BEM, where share_expanded combines the share block with an expanded modifier. section 11.6.2

Figure 11.12 Closed and expanded states

Compare the closed and expanded component states to see how adding a class changes the menu’s presentation. section 11.6.2

How Tiny CSS Projects covers it

How deep it goes

Explains naming, selector use, and JavaScript toggling through a worked interactive-menu example, without detailing CSS class implementation internals.

Examples

Uses share__menu, share_expanded, a hidden menu, and an expanded share component as concrete styling examples.

What it assumes

Assumes basic HTML attributes and CSS selectors while demonstrating class-based styling through an existing interactive component.

What you can do after

Apply styles to grouped elements and interactive states using meaningful class names and state-based selectors.

How it connects

Connects CSS classes with HTML attributes, CSS selectors, JavaScript classList.toggle, BEM, responsive design, and maintainability.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  WordPress Power Toolkit: Harness AI to build next-level websitesA CSS class is a reusable identifier assigned to HTML elements so that shared CSS style declarations can be applied to them.
• 

  liveBookmanning.com
  Web Components in ActionA CSS class is a named classification applied to elements so that matching CSS rules can style them.
• 

  liveBookmanning.com
  React in DepthA CSS class is a named selector target that associates one or more style rules with elements carrying that class name.
• 

  liveBookmanning.com
  Build a Frontend Web Framework (From Scratch)A CSS class is a reusable label assigned to elements so stylesheet rules can select and style them.

Compare how 5 books explain CSS class →

Related concepts

• BEMconfigured by · BEM, or Block-Element-Modifier, is a CSS naming methodology that organizes classes around reusable blocks, their elements, and their modifiers.
• CSShakeused by · CSShake is a CSS library that provides animation classes for making elements appear to shake.
• style attributealternative to · The style attribute is an HTML or SVG attribute whose value contains CSS declarations applied directly to that element.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.