HTML CSS guidelines - Hives/acebook-business-logic GitHub Wiki

HTML should be semantic where possible. That means the elements should say describe their contents' meaning in a human and machine reading way. Check out this flowchart for examples.

At time of writing our site is not great on this, but we do at least have our menu inside a <ul> in a <nav> element which is good.

Classes and ids should also be semantic - i.e. they should describe the meaning of the page contents, rather than, for instance, appearance. This can be counterintuitive, as we use ids and classes to select elements in order to change their appearance. So you might give an element which contains a post the class of post for example.

You can only use an id once on a page, so it should refer to something unique, like the feed or the sign-up form. Use classes to tag things which appear multiple times, like posts, or the blocks containing posts' authors details.

When designing your CSS rules try to make them general enough that they can be re-used. For instance, our sign-up and login forms have both got id="single_form" which means we can reuse the same css on both pages. Nice and DRY.

If you need a certain set of elements to share some css rules but differ in other respects, put the common rules into one rule-set and apply the different rules in a separate rule-set. For instance, all our form elements have a single block of CSS applied, and then textarea elements have one extra rule:

input[type=text], input[type=password], input[type=email], textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  font-size: 1rem;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
}

textarea {
  height: 150px;
}

Flexbox is a way of creating complex layouts in CSS. Check this guide (CSS tricks) to blow your mind.