explaingit

mdo/code-guide

★ 8,485SCSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

Code Guide is a written set of opinionated standards for writing HTML and CSS, created by Bootstrap co-creator Mark Otto, to help developers keep code consistent and readable across solo and team projects.

Mindmap

mindmap
  root((code-guide))
    HTML rules
      Indentation
      Attribute order
      Doctype usage
    CSS rules
      Property order
      Class naming
      Selector specificity
    Website
      Jekyll static site
      GitHub Pages hosting
    Translations
      15+ languages
      Community maintained
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

Adopt a shared HTML and CSS coding standard across your development team to reduce style debates

USE CASE 2

Reference CSS property ordering and HTML attribute ordering rules during code reviews

USE CASE 3

Fork and translate the Code Guide into another language to share with your local developer community

Tech stack

HTMLCSSSCSSJekyll

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial use as long as you include the MIT license notice.

In plain English

Code Guide is a written set of standards for writing HTML and CSS, the two languages used to structure and style web pages. It is not a software tool or library you install and run. Instead, it is a document that lays out opinions and conventions for how to format and organize code so that it stays consistent and manageable over time, whether you are working alone or on a team. The guide is published as a website at codeguide.co and authored by Mark Otto, who is known for co-creating the Bootstrap front-end framework. The content covers things like how to indent HTML, how to order CSS properties, when to use classes versus IDs, and other practical choices that tend to cause disagreement among developers. Having a shared standard reduces friction when multiple people work on the same codebase. The repository itself is the source for that website. It is built with Jekyll, a tool that converts text files into a static website, and hosted on GitHub Pages. The README is brief, covering only how to set up a local copy of the site for development and how to submit a translation. The guide has been translated into more than fifteen languages, including Chinese, French, German, Japanese, Korean, Russian, Spanish, and others, each maintained by volunteer translators in separate repositories. If a translation exists, a link to it appears in the README, though not all translations are kept up to date with the original. The project is released under the MIT license, which allows anyone to use or adapt it freely. If you are looking to read the actual coding standards rather than run any code, visiting codeguide.co directly is the simplest path.

Copy-paste prompts

Prompt 1
Based on the Code Guide standards by @mdo, rewrite this HTML snippet to follow best practices for indentation, attribute order, and doctype
Prompt 2
Using the Code Guide CSS conventions, review my stylesheet and suggest how to reorder properties and remove redundant rules
Prompt 3
Help me create a team coding standards document based on Code Guide rules for our new web project
Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.