Frontend Guidelines

FRONTEND GUIDELINES

SEMANTICS <h1> <figure> <img alt=‘Company’ src=‘logo.png’> </figure> </h1> <h1> <img
alt=‘Company’ src=‘logo.png’> </h1>

<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> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime=‘2015-02-21’>21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>   SEMANTICS

<h1><img alt=‘Logo’ src=‘logo.png’></h1> <div class=‘button’></div> <h1><img alt=‘Acid Labs’ src=‘logo.png’></h1> <button></button>
  ACCESSIBILITY

<!doctype html> <html> <head> <title></title> </head> </html> <!doctype html> <html
lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> </html>   LANGUAGE

<!doctype html> <html> <head> <title></title> <script src=analytics.js></script> </head> </html> <!doctype
html> <html lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> <body> <script src=analytics.js></script> </body> </html>   PERFORMANCE

SEMI COLONS div { color: red } div { color:
red; } /* bad */ /* good */

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

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

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

SELECTORS img[src$=svg], ul > li:first-child { opacity: 0; } [src$=svg],
ul > :first-child { opacity: 0; } /* bad */ /* good */

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

OVERRIDING li { visibility: hidden; } li:first-child { visibility: visible;
} li + li { visibility: hidden; } /* bad */ /* good */

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

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

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

PREFIXES 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; } div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; } /* bad */ /* good */

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

UNITS div { margin: 0px; font-size: .9em; line-height: 22px; transition:
500ms; } div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; } /* bad */ /* good */

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

DRAWING div::before { content: url(white-circle.svg); } div::before { content: "";
display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } /* bad */ /* good */

Frontend Guidelines

Frontend Guidelines

Ricardo Andrés Bello

More Decks by Ricardo Andrés Bello

Other Decks in Programming

Featured

Transcript

FRONTEND GUIDELINES

HTML

SEMANTICS <h1> <figure> <img alt=‘Company’ src=‘logo.png’> </figure> </h1> <h1> <img

<div id=‘main’> <div class=‘article’> <div class=‘header’> <h1>Blog post</h1> <p>Published: <span>21st

<meta http-equiv=Content-Type content=‘text/html; charset=utf-8’ /> <link rel=‘stylesheet’ href=‘style.css’ type=‘text/css’ />

<h1><img alt=‘Logo’ src=‘logo.png’></h1> <div class=‘button’></div> <h1><img alt=‘Acid Labs’ src=‘logo.png’></h1> <button></button>

<!doctype html> <html> <head> <title></title> </head> </html> <!doctype html> <html

<!doctype html> <html> <head> <title></title> <script src=analytics.js></script> </head> </html> <!doctype

CSS

SEMI COLONS div { color: red } div { color:

NATURAL FLOW img { display: block; } img { vertical-align:

NATURAL FLOW div { width: 100px; position: absolute; right: 0;

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

SELECTORS img[src$=svg], ul > li:first-child { opacity: 0; } [src$=svg],

SPECIFICITY .bar { color: green !important; } .foo { color:

OVERRIDING li { visibility: hidden; } li:first-child { visibility: visible;

INHERITANCE div h1, div p { text-shadow: 0 1px 0

LANGUAGE :nth-child(2n + 1) { transform: rotate(360deg); } :nth-child(odd) {

BREVITY div { transition: all 1s; top: 50%; margin-top: -10px;

PREFIXES div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform:

ANIMATIONS div:hover { animation: move 1s forwards; } @keyframes move

UNITS div { margin: 0px; font-size: .9em; line-height: 22px; transition:

COLORS div { color: hsl(103, 54%, 43%); } div {

DRAWING div::before { content: url(white-circle.svg); } div::before { content: "";