The following rules are not set in stone. They are a guideline and a way to inspire you to create your own set of rules. Something you will need to create a codebase that allows team collaboration and consistency across the entire project.
Credits to cssguidlin.es and codeguide.co
<!DOCTYPE html>
<html>
<head>
</head>
</html>
<html lang="en">
<html lang="en-us">
<html lang="nl-be">
<!-- [primary-code]-[subcode optional] -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<head>
<meta charset="utf-8">
</head>
<!-- External CSS -->
<head>
<link rel="stylesheet" href="main.css">
</head>
<!-- JavaScript - before the closing body tag -->
<script src="main.min.js"></script>
</body>
Note the missing type="text/css" and type="text/javascript". This is no longer required in HTML5
<!-- BAD -->
<div class="article-header">
<!-- GOOD -->
<header class="article-header">
<!-- BAD -->
<div class="navigation">
<!-- GOOD -->
<nav class="primary-nav">
Some of the new HTML5 tags
article, aside, details, figcaption, figure, footer,
header, hgroup, main, menu, nav, section, summary {
display: block;
}
<header role="banner">
<div class="main-content" role="main">
<footer role="contentinfo">
An extensive TABS example.
Look for the role="" and aria-xxxxx="" attributes
<h1> per page
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>
: for each declaration#fff instead of #FFFFFFmargin: 0; instead of margin: 0px;
.selector,
.another-selector {
padding: 15px;
margin: 0;
background-color: #f90;
overflow: hidden; /* clearfix */
}
Don't state the obvious
/* some declarations make elements become block-level elements */
.module-element {
float: left; /* makes it block-level */
display: block; /* redundant */
}
.another-module-element {
position: absolute; /* makes it block-level */
display: block; /* redundant */
}
Drop'em .... some of them
.island {
-webkit-border-radius: 3px; /* redundant */
-moz-border-radius: 3px; /* redundant */
-o-border-radius: 3px; /* redundant */
border-radius: 3px;
}
ID's are used as page anchors or as JavaScript hooks, NOT for styling. Due to specificity problems.
/* BAD */
#navigation {}
/* Hack */
[id="navigation"] {} /* same specificity as a class */
Some declarations can be used as hacks or can be mistaken as poor knowledge
.title {
overflow: hidden; /* clip long unbreakable words */
width: 100%; /* Safari needs this with overflow: hidden; */
}
.row {
overflow: hidden; /* clearfix hack */
}
.comment {
position: relative; /* to position child elements */
}
.comment__count {
position: absolute;
}
.trigger__dummy {
position: relative; /* stacking order change */
z-index: 3; /* higher as .trigger */
}
.trigger {
position: relative; /* stacking order change */
z-index: 2; /* needs to be lower as .trigger__dummy */
}
Block - Element - Modifier
.person {}
.person__head {}
.person--tall {}
/* BAD */
.pageHeader {} /* no camelCasing */
.button-blue {} /* to specific */
.s {} /* What the heck does .s mean ???? */
/* GOOD */
.page-header {} /* hyphens FTW! */
.button--primary {} /* and with BEM */
.btn {}
Avoid nesting selectors as much as possible
/* BAD */
.block-list {}
.block-list > li {}
/* GOOD */
.block-list {}
.block-list__item { }
Classes on all the things!
<ul class="block-list">
<li class="block-list__item">
<a href="#" class="block-list__link">item 1</a>
</li>
<li class="block-list__item">
<a href="#" class="block-list__link">item 2</a>
</li>
<li class="block-list__item">
<a href="#" class="block-list__link">item 3</a>
</li>
</ul>
Less or Sass or ...
Pick the one you like. The end.
... with preprocessors
First: extends and mixins. The rest will follow in no particular order but group them
.block-list {
@extend %unstyled-list;
@include box-shadow(5px 5px 5px rgba(0,0,0,0.5));
/* Typography */
font-family: 'Comic sans', sans-serif;
color: $text-color;
/* Box model */
float: left;
width: 50%;
/* Positioning */
position: absolute;
top: 20px;
left: -20px;
/* Visual */
border: 1px solid $primary-color;
/* Misc */
opacity: 1;
}
Flexbox is meant for UI layout (like a navigation bar or a module), NOT for page layout. That's what Grid layout is for.
Min- and max-content
Resetting All Properties: the all property
Element queries
Disable page zooming
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Use a library because you can
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/scripts/vendor/modernizr.2.8.3.js"></script>
There are alternatives