Skip to content

Instantly share code, notes, and snippets.

@malthunayan

malthunayan/html-css-guidelines.md

Last active March 28, 2022 10:57
Show Gist options
  • Save malthunayan/743c51595f7f026bcfc0b7b701ab9fe6 to your computer and use it in GitHub Desktop.
Save malthunayan/743c51595f7f026bcfc0b7b701ab9fe6 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 & CSS3 Guidelines
Raw
html-css-guidelines.md

General HTML5 and CSS Guidelines

This gist briefly goes over semantics, and then establishes CSS guidelines.

Semantic HTML

Here is deeper dive into semantics.

Some general rules to follow:

  • Use section, article, figure, etc... instead of div and span
  • Try to avoid using div tags where possible

General CSS Guidelines

  1. Do not use float
  2. Avoid using px as units (use rem or em)
  3. Do not use margin or padding to center stuff (unless you are doing margin: auto and you have given the element a width)
  4. Do not use z-index or position properties unless you absolutely have to
  5. Try to use flex or grid to position stuff, with grid being the preference
  6. Order your CSS class names as they appear in the HTML (e.g., I should not see a class name at the top of the CSS file, and then it being used at the end of the HTML file)
  7. Media queries should be at the end of the file, but try as much as possible to avoid writing media queries (choosing proper units and using the grid system will greatly help you avoid writing media queries)
  8. Do not under any circumstance use the !important flag
  9. Prefer hex codes over rgb, and definitely do not use color names
  10. Use em for margin/padding
  11. Use rem for font-size and anywhere you would usually use px (unless it is very minor like 1px borders, then using pixels is fine)

Resources

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