Giter VIP home page Giter VIP logo

front-end-guidelines's Introduction

FRONT END GUIDELINE HANDBOOK

Updated June, 2021 - Mike Vo

HTML

  • Use HTML5
  • Define character encoding UTF-8 <meta charset="utf-8">
  • Use Semantics
  • Do not use table for layout
  • Use th tags for table header elements
  • Don't mix quotation marks
  • Define title
  • figcaption first or last child of figure
  • Close tags
  • No inline styles
  • Place External CSS Files Within the head tag
  • Place Javascript files at bottom of body
  • Do not inline Javascript
  • Lowercase tag names
  • Use h1-h6 to outline the page content
  • Further readings: https://www.w3schools.com/html/html5_syntax.asp

CSS

  • Use a Reset or Reset with Normalize.css
  • No 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
  • Name something, be it an ID or a class, by the nature of what it is rather than by what it looks like

Example CSS file structure:

/* Reset */

/* Typography */

/* Layout */

/* Navigation */

/* UI-elements */

/* Forms */

Javascript

  • Call things by their name – easy, short and readable variable and function names
  • Avoid globals
  • Stick to a strict coding style
  • Comment as much as needed but not more
  • Keep DOM access to a minimum
  • Don’t yield to browser whims
  • Don’t trust any data
  • Add functionality with JavaScript, don’t create too much content

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.