Frontend Guidelines

HTML & CSS by Benjamin De Cock

HTML

​> Semantics
> Brevity
> Accessibility
> Language
> Performance

HTML

​HTML5 provides us with lots of semantic elements aimed to describe precisely the content. Make sure you benefit from its rich vocabulary.

Semantics(1)

<!-- bad -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>

<!-- good -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

HTML

Make sure you understand the semantics of the elements you're using. It's worse to use a semantic element in a wrong way than staying neutral.

Semantics(2)
<!-- bad -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>

<!-- good -->
<h1>
  <img alt=Company src=logo.png>
</h1>

HTML

Keep your code terse. Forget about your old XHTML habits.

Brevity

<!-- bad -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>

  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>

HTML

Accessibility shouldn't be an afterthought. You don't have to be a WCAG expert to improve your website, you can start immediately by fixing the little things that make a huge difference, such as:

  • learning to use the alt attribute properly
  • making sure your links and buttons are marked as such (no <div class=button> atrocities)
  • not relying exclusively on colors to communicate information
  • explicitly labelling form controls

Accessibility

<!-- bad -->
<h1><img alt="Logo" src="logo.png"></h1>
<!-- good -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

HTML

While defining the language and character encoding is optional, it's recommended to always declare both at document level, even if they're specified in your HTTP headers. Favor UTF-8 over any other character encoding.

Language

<!-- bad -->
<!doctype html>
<title>Hello, world.</title>
<!-- good -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>

HTML

Unless there's a valid reason for loading your scripts before your content, don't block the rendering of your page. If your style sheet is heavy, isolate the styles that are absolutely required initially and defer the loading of the secondary declarations in a separate style sheet. Two HTTP requests is significantly slower than one, but the perception of speed is the most important factor.

Performance

<!-- bad -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>
<!-- good -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

CSS

​> Semicolons
> Box model
> Flow
> Positioning
> Selectors
> Specificity
> Overriding
> Inheritance
> Brevity
> Language
> Vender prefixes
> Animations
> Units
> Color
> Drawing

CSS

While the semicolon is technically a separator in CSS, always treat it as a terminator.

Semicolons

/* bad */
div {
  color: red
}

/* good */
div {
  color: red;
}

CSS

The box model should ideally be the same for the entire document. A global * { box-sizing: border-box; } is fine, but don't change the default box model on specific elements if you can avoid it.

Box model

/* bad */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
/* good */
div {
  padding: 10px;
}

CSS

Don't change the default behavior of an element if you can avoid it. Keep elements in the natural document flow as much as you can. For example, removing the white-space below an image shouldn't make you change its default display:

Flow(1)

/* bad */
img {
  display: block;
}
/* good */
img {
  vertical-align: middle;
}

CSS

Similarly, don't take an element off the flow if you can avoid it.

Flow(2)

/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
}
/* good */
div {
  width: 100px;
  margin-left: auto;
}

CSS

There are many ways to position elements in CSS but try to restrict yourself to the properties/values below. By order of preference:

Positioning

display: block;
display: flex;

position: relative;
position: sticky;
position: absolute;
position: fixed;

CSS

Minimize selectors tightly coupled to the DOM. Consider adding a class to the elements you want to match when your selector exceeds 3 structural pseudo-classes, descendant or sibling combinators.

Selectors

/* bad */
div:first-of-type :last-child > p ~ *
/* good */
div:first-of-type .info

CSS

Don't make values and selectors hard to override. Minimize the use of id's and avoid !important.

Specificity

/* bad */
.bar {
  color: green !important;
}
.foo {
  color: red;
}
/* good */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

CSS

Overriding styles makes selectors and debugging harder. Avoid it when possible.

Overriding

/* bad */
li {
  color: green;
}
li:first-child {
  color: red;
}

/* good */
li {
  color: red;
}
li + li {
  color: green;
}

CSS

Don't duplicate style declarations that can be inherited.

Inheritance

/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}

/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

CSS

Keep your code terse. Use shorthand properties and avoid using multiple properties when it's not needed.

Brevity

/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}
/* good */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

CSS

Prefer English over math.

Language

/* bad */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}

/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}

CSS

Kill obsolete vendor prefixes aggressively. If you need to use them, insert them before the standard property.

Vendor prefixes

/* bad */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}
/* good */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

CSS

Favor transitions over animations. Avoid animating other properties than opacity and transform.

Animations

/* bad */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}
/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

CSS

Use unitless values when you can. Favor rem if you use relative units. Prefer seconds over milliseconds.

Units

/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}

/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

CSS

If you need transparency, use rgba. Otherwise, always use the hexadecimal format.

Color

/* bad */
div {
  color: hsl(103, 54%, 43%);
}
/* good */
div {
  color: #5a3;
}

CSS

Avoid HTTP requests when the resources are easily replicable with CSS.

Drawing

/* bad */
div::before {
  content: url(white-circle.svg);
}

/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

End

Credit : https://github.com/bendc/frontend-guidelines

Made with Slides.com