Frontend coding standards and best practices
I want to produce a clean, semantic, cross-browser and well supported code. All of these, with maintainability as one of the first priorities.
In this front-end style guide there are some best practices and standards I am following when coding.
Note: in this documents, sometimes I use “I” to refer specifically to what I use (or prefer to use), while some other times I use “We” to highlight a common best practice.
Table of Contents
- Node Modules
- HTML
- HTML
- Validation
- Declare a Doctype
- Declare the language of the page
- Titles
- Meta Descriptions
- Viewport
- Use semantic HTML 5 tags
- Close the tags
- Use lowercase in your tags
- Character encoding
- Use conditional comments
- Use practical
idandclassnames and values - Images need
altattributes - Use tables for tabular data only
- Include external CSS inside the
<head>tag - Avoid to specify the type of imported CSS and JavaScript files
- Separate content from style
- Keep the syntax organized
- Reduce markup
- Whitespacing and formatting
- HTML
- Styles (CSS/SCSS)
- CSS
- Use CSS reset or Normalize CSS
- Never use inline styles
- Modularize styles for reuse
- Class names
- Use multiple stylesheets, but be aware of them expanding beyond control
- Organize CSS with comments
- Never use large fixed width elements
- Never let content rely on a particular viewport width
- Whitespacing and formatting
- Proper spacing between properties
- One selector per line
- Blank line between rulesets
- Same line opening braces
- Same column closing braces as the first character of the ruleset
- Indenting child elements
- End all declarations with a semicolon
- Use double quotes in style files
- Double quote attribute values
- Avoid units on zero values
- Grouping vendor prefixes
- Properties order
- Long comma separated property values
- Keep the natural flow
- Typography
- Inheritance
- Use shorthand
- Never ever use
!important - Selectors
- Positioning
- Colours
- Media queries
- Sass/SCSS specific standards
- CSS
- JavaScript/TypeScript
- JavaScript
- TypeScript specific standards
- General best practices