Skip to content

Instantly share code, notes, and snippets.

@MWins

MWins/CSS-Best Practices.md

Last active June 6, 2023 15:27
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save MWins/6c07745a7c55ee60b131 to your computer and use it in GitHub Desktop.
Save MWins/6c07745a7c55ee60b131 to your computer and use it in GitHub Desktop.
Download ZIP
CSS best practices
Raw
CSS-Best Practices.md

What CSS best practices should I follow ?

HTML best practices Depends. How far down the rabbit hole do you want to go ?

Just need something to look good : use a frontend framework like foundation or bootstrap, won't learn much about CSS. Short list of Front End Frameworks

Surface level : work general to specific. Comment the sections of the CSS. Use a reset or normalizer. Work on patterns, use classes over IDs for reuse. CSS Resets - includes normalize.css Don't have links for the other parts. see below

Little bit deeper : Look into BEM or OOCSS. Those stand for Block Element Modifier and Object Oriented CSS. Two popular methodologies for CSS. Also SMACSS.

BEM -methodology

BEM 101 from css-tricks

intro to OOCSS - I post this because the OOCSS.org site is pretty much rubbish.

SMACSS - Different methodology, parts of the book are freely available.

Just jump all the way in : CSS pre-processors. LESS or SASS. These will give you some programmatic features for CSS like variables,mixins etc.

LESS JS - other versions exist for platforms just search for LESS + language

SASS

Basic Best Practices

Ok here's some general rules I pulled from CSS best practice articles since I thought the surface level lacked a single reference point I just extracted some repeated advice :

  • Use a Reset or Reset with Normalize.css
  • Avoid Using Inline Styles
  • Organize the Stylesheet with a Top-down Structure
  • Divide your stylesheet into specific sections: i.e. Global Styles
  • Use Hex Code instead of Name Color
  • Combine Elements
  • Use Shorthand
  • Use Absolute Positioning Sparingly
  • Hyphens Instead of Underscores for CSS classes
  • Make Use of Generic Classes - design patterns / modules
  • Shorten Selector Chains
  • Use the LINK tag to include, never the @import.
  • name something, be it an ID or a class, by the nature of what it is rather than by what it looks like.
  • never use spacer images.
  • Define default styling for h1-h6 headings including headings as links.
  • Headings should show a hierarchy indicating different levels of importance from the top down starting with h1 having the largest font size.
  • font-normalization -To change the size of a font, always use percentages as the units because they render more consistently than ems
  • blanket-ban on IDs in CSS
  • As a rule of thumb, don't nest further than 3 levels deep
  • Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.
  • If the value of the width or height is 0, do not specify units.
  • often include a snippet of HTML in a CSS comment. - optional but might be a good idea
Details on specific practices
  • Use Hex Code instead of Name Color

Consistency. Decide how you are going to do things and stick to it, at least for the current project. That would mean either use names or hex or rgba exclusively. Pick one and use it. Harder to stick to just names.

Prototypes are not where best practices should be considered.

I scanned all of the source articles and not a one recommended using rgba exclusively. Personally I prefer rgba but have a feeling it isn't recommended due to 'use it when it's necessary' or it could be the fact devs have hexs memorized already and they aren't willing to ditch them yet.

  • blanket-ban on IDs in CSS

IDs have the specificity impact of a sledge hammer.

  • Organize the Stylesheet with a Top-down Structure
  • Divide your stylesheet into specific sections: i.e. Global Styles

These both refer to using comments to divide the CSS file into sections. Should flow from general to specific. Basic example :

   /* Reset */

  /* Typography */
  
  /* Layout */
  
  /* Navigation */
  
  /* UI-elements */
  
  /* Forms */
  
  /* Media Queries */

HTML

Short list of HTML best practices. Sources are afer the CSS list.

  • use HTML5
  • use the doctype
  • Don't use XML Declaration
  • validate but not validate!
  • define character encoding <meta charset="utf-8">
  • Semantics
  • Use P tags for paragraphs over multiple BR
  • use BLOCKQUOTE when appropriate
  • use LABEL elements with the FOR attribute set
  • use CSS where possible; includes INPUT size attribute
  • Do not use TABLES for layout
  • user microformats where possible and helps
  • use THEAD TBODY
  • use TH tags for table header elements
  • use CSS to transform text; headlines use title case.
  • quote attributes ; double quote is preference
  • Don't mix quotation marks
  • use UTF-8
  • omit type tag for CSS link tag
  • define TITLE
  • define the BODY tag ; follows explicit defintion concept
  • FIGCAPTION first or last child of FIGURE
  • use rel attribute where possible
  • omit type attribute for SCRIPT tag when loading javascript
  • use the download attribute for A tags when possible (IE/Safari does not support )
  • Close tags
  • Avoid inline styles
  • Place External CSS Files Within the Head Tag
  • Place Javascript files at bottom
  • Do not inline Javascript (production, ok in development)
  • Lowercase tag names
  • Use h1-h6 to outline the page content
  • include page navigation A anchors for sections
  • Do not hijack the TABORDER
sources :

http://www.sitepoint.com/series/css-architectures/

http://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741 - this is from 2009 so be aware of its age.

http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/

http://innofied.com/25-css-best-practices-we-follow-at-innofied/

http://www.erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css

http://www.1stwebdesigner.com/css-best-practices/

http://isobar-idev.github.io/code-standards/

https://css-tricks.com/css-style-guides/

http://yuilibrary.com/yui/docs/cssfonts/

HTML Best Practice Sources

http://isobar-idev.github.io/code-standards/

https://github.com/hail2u/html-best-practices

http://code.tutsplus.com/tutorials/30-html-best-practices-for-beginners--net-4957 -- old 2009

http://learn.shayhowe.com/html-css/writing-your-best-code/

https://www.webaccessibility.com/best_practices.php

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment