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

• Media Queries
• Sass Twitter Thread
• What CSS Units to Use
• Rem vs. Em CSS Units
• Grid System