explaingit

bendc/frontend-guidelines

8,340Audience · developerComplexity · 1/5Setup · easy

TLDR

Frontend Guidelines is a readable style guide covering good habits and common mistakes in HTML, CSS, and JavaScript, aimed at front-end developers who want to write cleaner, more maintainable web code.

Mindmap

mindmap
  root((repo))
    What it does
      Style guide document
      Best practices
    HTML Rules
      Semantic tags
      Accessibility labels
      Terse markup
    CSS Rules
      Simple selectors
      Avoid important
      Flexbox and Grid
      Units and colors
    JavaScript Rules
      Clean patterns
      Short examples
    Audience
      Front-end developers
      Beginners
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 through the guide in an hour and immediately apply CSS and HTML tips to a current project.

USE CASE 2

Use the bad-and-good code examples as a checklist when reviewing front-end pull requests on your team.

USE CASE 3

Share with a junior developer as a lightweight introduction to clean HTML, CSS, and JavaScript coding habits.

Tech stack

HTMLCSSJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Frontend Guidelines is a written reference that describes good habits and common mistakes to avoid when writing HTML, CSS, and JavaScript for websites. It is not a piece of software you install or run, it is a readable document aimed at developers who want to write cleaner, more consistent front-end code. The HTML section covers things like using the correct semantic tags instead of generic divs, keeping markup terse by dropping unnecessary attributes that modern browsers handle automatically, making pages accessible by labeling form controls and writing meaningful image alt text, and loading scripts in the right order so they do not slow down page rendering. The CSS section is the longest part. It addresses how to write selectors that are easy to override later, why avoiding the "!important" override keyword keeps stylesheets maintainable, how to use CSS inheritance and shorthand properties to reduce duplication, and when to favor newer layout tools like Flexbox and Grid instead of absolute positioning. It also gives specific guidance on units, colors, animations, and vendor prefixes for older browser support. The JavaScript portion (not fully visible in the provided excerpt) follows the same pattern of brief rules paired with short "bad" and "good" code examples that make the guidance concrete. The repository is essentially a style guide written as a README. There is no build process, no package to install, and no application to run. Someone new to web development could read through it in an hour and immediately apply several of the suggestions to real projects.

Copy-paste prompts

Prompt 1
Based on the frontend-guidelines style guide, review this HTML snippet and flag any issues with semantic tags, unnecessary attributes, or missing accessibility labels: [paste your HTML here].
Prompt 2
The frontend-guidelines project recommends avoiding the !important override in CSS. Explain why with a concrete example and show me how to refactor a stylesheet that currently relies on it.
Prompt 3
Using the principles from the frontend-guidelines repo, rewrite this CSS block to use Flexbox instead of absolute positioning and explain each change: [paste your CSS here].
Prompt 4
According to the frontend-guidelines style guide, what are the key rules for writing maintainable CSS selectors? Give me a summary with one bad and one good example for each rule.
Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.