Advice and guidelines for creating manageable and scalable front-end architecture

HTML CSS New techniques Do's and Don't do's Hands on Code Review

Disclaimer

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

HTML Guidelines

Syntax - code standards

Tabs vs. Spaces : pick either but be consistent
Indent nested elements
Use double quotes, never single quotes, on attributes
Don't include a trailing slash in self-closing elements

HTML5 doctype

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

Language attribute

<html lang="en">
<html lang="en-us">
<html lang="nl-be">
<!-- [primary-code]-[subcode optional] -->

List of language codes

IE compatibility mode

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>

Character encoding

<head>
    <meta charset="utf-8">
</head>

CSS and JavaScript includes

<!-- 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

Use the HTML5 tags to their advantage

<!-- 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;
}

Accessibility in HTML

See Using WAI-ARIA in HTML

<header role="banner">
<div class="main-content" role="main">
<footer role="contentinfo">

An extensive TABS example. Look for the role="" and aria-xxxxx="" attributes

SEO in HTML

1 <h1> per page Basic semantics with correct use of tags Microformats with Schema.org

<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>

CSS

Syntax - code standards

Tabs vs. Spaces - pick one but be consistent
Grouping selectors: each selector on a single line
One space between selector and opening brace
Closing brace on a new line
Each property on a single line
One space after : for each declaration
Lowercase all hex values + shorthand : #fff instead of #FFFFFF
No units for zero values: margin: 0; instead of margin: 0px;
Write code comments
Don't us ID's for styling

.selector,
.another-selector {
    padding: 15px;
    margin: 0;
    background-color: #f90;
    overflow: hidden; /* clearfix */
}

Learn your CSS basics

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 */
}

Vendor-prefixes

Drop'em .... some of them

.island {
    -webkit-border-radius: 3px; /* redundant */
       -moz-border-radius: 3px; /* redundant */
         -o-border-radius: 3px; /* redundant */
            border-radius: 3px;
}

No ID's please

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 */

Document your declarations

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 */
}

BEM

Block - Element - Modifier

.person {}
.person__head {}
.person--tall {}

Naming conventions

/* 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 {}

Performance matters

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>

CSS preprocessors

Less or Sass or ...

Pick the one you like. The end.

Declaration order

... 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;
}

The future is here

New techniques

Responsive images

Flexbox

Flexbox is meant for UI layout (like a navigation bar or a module), NOT for page layout. That's what Grid layout is for.

Web components

Experimental stuff

Min- and max-content

Resetting All Properties: the all property

http://dev.w3.org/csswg/css-cascade/#all-shorthand

Element queries

Do's and Don't Do's

Don't do

Disable page zooming

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Don't do

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

Do

Keep improving/evaluating your architecture
Try new stuff
Refactor all the things all the time

Advice and guidelines for creating manageable and scalable front-end architecture

bengie

Advice and guidelines for creating manageable and scalable front-end architecture

0 1

modular-design-workshop

Advice and guidelines for creating manageable and scalable front-end architecture

Disclaimer

HTML Guidelines

Syntax - code standards

HTML5 doctype

Language attribute

IE compatibility mode

Character encoding

CSS and JavaScript includes

Use the HTML5 tags to their advantage

Accessibility in HTML

SEO in HTML

CSS

Syntax - code standards

Learn your CSS basics

Vendor-prefixes

No ID's please

Document your declarations

BEM

Naming conventions

Performance matters

CSS preprocessors

Declaration order

The future is here

New techniques

Responsive images

Flexbox

Web components

Experimental stuff

Do's and Don't Do's

Don't do

Don't do

Do

Hands on

Advice and guidelines for creating manageable and scalable front-end architecture

bengie

Advice and guidelines for creating manageable and scalable front-end architecture

0 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

modular-design-workshop

Advice and guidelines for creating manageable and scalable front-end architecture

Disclaimer

HTML Guidelines

Syntax - code standards

HTML5 doctype

Language attribute

IE compatibility mode

Character encoding

CSS and JavaScript includes

Use the HTML5 tags to their advantage

Accessibility in HTML

SEO in HTML

CSS

Syntax - code standards

Learn your CSS basics

Vendor-prefixes

No ID's please

Document your declarations

BEM

Naming conventions

Performance matters

CSS preprocessors

Declaration order

The future is here

New techniques

Responsive images

Flexbox

Web components

Experimental stuff

Do's and Don't Do's

Don't do

Don't do

Do

Hands on

0 1