Chapters

Coding Standards

Don’t Fight the Web

Use standard HTML components as a rule: don’t use unnecessary wrapping <div> or <span> tags (if you don’t know the difference, stop reading now, and study up), do not recreate existing html components in JavaScript using inappropriate tags and always consider accessibility and performance (you will never get it perfect, but that shouldn’t stop you from trying and learning).

Strive to Build Reusable Components

Each item should be broken into functionally small pieces (though no smaller), like, say a button. These components can then be incorporated into one another, akin to snapping together lego bricks. Each larger pattern will consist of a number of smaller components. If you are building anything, think about how you could make it reusable.

Larger modules or patterns will include a number of smaller components with a reference to the page where they are found in a comment or description. Larger components ought to be built with the intention of being passed objects of data and thus be built as generically as possible.

Spacing

Use spaces liberally throughout your code. “When in doubt, space it out.”

These rules encourage liberal spacing for improved developer readability. The minification process creates a file that is optimized for browsers to read and process, so don’t worry about any excessive spacing.

  • Indentation with tabs (tab size of 4 is ideal).
  • Any , and ; must not have preceding space.
  • Any ; used as a statement terminator must be at the end of the line.
  • The ? and : in a ternary conditional must have space on both sides.

General Rules

Generally, match whatever type of frontend classes/method that has been used on an existing project. For fresh start projects following the BEM standard, cheat sheet here is a good way to go

  • Always use semantic HTML5 tags
  • This is easier said than done, but try and use as little code as possible and keep things simple (Fewer divs, etc.)
  • Do not use position absolute for layout
  • Careful with negative margins
  • Never set explicit heights on just about anything and very rarely on widths
  • When possible set a background colour similar in darkness to the background image
  • Always use <strong> instead of <b> tags to bold text (better for SEO and <b> is deprecated)
  • External links should always open in a new tab (target="_blank")
  • Designers can always re-export assets if they aren’t working well for you so just ask instead of fighting with CSS
  • Try to space elements with bottom margin only, e.g., margin-block-end: 2rem;, margin-bottom: 2rem; or margin: 0 0 2rem; (for consistency)
  • Create reusable components as much as possible so they can be used interchangeably throughout the site
  • Always use transitions on hover. Standard transition: all 0.2s ease;
  • Don’t over nest your styles
  • Don’t use IDs for styling
  • Avoid using !important as much as possible