explaingit

csswizardry/css-guidelines

3,652Audience · developerComplexity · 1/5Setup · easy

TLDR

An opinionated set of guidelines for writing manageable, maintainable CSS in team projects, now hosted at cssguidelin.es.

Mindmap

mindmap
  root((CSS Guidelines))
    What it does
      Style conventions
      Naming rules
      Team standards
    Topics covered
      Selector naming
      Specificity management
      Code comments
      File organization
    Audience
      Front-end developers
      Design system teams
    Where it lives
      cssguidelin.es
      GitHub redirect
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Read the guidelines to establish consistent CSS naming and formatting conventions for your team.

USE CASE 2

Use the selector naming advice to reduce specificity conflicts in a growing stylesheet.

USE CASE 3

Share with a team as a reference for code review standards around CSS structure and comments.

Tech stack

CSS

Getting it running

Difficulty · easy Time to first run · 5min

The guidelines are documentation only, no installation needed.

License terms are not specified in the available information.

In plain English

This repository originally housed a set of opinionated guidelines for writing CSS that is manageable and maintainable in large projects. The guidelines were written by Harry Roberts, a front-end consultant known for work on CSS architecture, and the content has since moved to a dedicated website at cssguidelin.es. The repository itself now contains only a brief redirect notice pointing visitors there. CSS is the language used to control the visual appearance of web pages. In small projects it is straightforward to manage, but as a codebase grows and more developers contribute, styles tend to accumulate, rules start to conflict, and it becomes difficult to predict what changing one rule will affect elsewhere. The guidelines at the linked site address this by proposing consistent approaches to naming, formatting, organizing, and commenting stylesheets so that multiple developers can work on the same CSS without introducing unintended side effects. The guidance covers topics like selector naming conventions, specificity management, the use of comments to communicate intent, and how to structure large stylesheets in a way that remains readable over time. These are the kinds of practical decisions that teams often make inconsistently, leading to stylesheets that become harder to work with as they grow. Because the actual content now lives at an external URL rather than in this repository, the repo itself serves mainly as a redirect and a historical record. The guidelines at cssguidelin.es remain freely available and are widely cited in front-end development communities as a practical reference for teams introducing more structure to their CSS. If you are looking for the specific advice, visiting cssguidelin.es is the right place to start.

Copy-paste prompts

Prompt 1
Based on CSS Guidelines principles, review my CSS file and flag naming inconsistencies, specificity issues, and missing comments.
Prompt 2
Explain BEM naming convention for CSS classes and show me a before/after example of applying it to a navigation component.
Prompt 3
What does 'managing specificity' mean in CSS and how do the CSS Guidelines recommend I structure selectors to avoid conflicts?
Prompt 4
Rewrite this messy CSS component using the CSS Guidelines approach: consistent naming, sensible specificity, and explanatory comments.
Open on GitHub → Explain another repo

← csswizardry on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.