Decencies, The

Yevhen Isakov

Bad code

Why?

HTML Decencies

doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!doctype html>

<! doctype html>

html5 is not only about doctype

  • <!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="..." type="text/css" />
<script src="..." type="text/javascript"></script>
  • <!doctype html>
<meta charset="utf-8" />
<link rel="stylesheet" href="..." />
<script src="..."></script>
That's not all...

Freedom?

  • 
<form method="get">
    <input type="text" name="tel" />
    <input type="password" name="pass" />
    <input type="checkbox" name="save_pass" checked />
    <input type="submit" value="OK" />
</form>

    
<FORM method=GET>
    <input type="TEXT" name=tel>
    <INPUT type=password NAME="pass" />
    <input TYPE=checkbox name=save_pass checked=checked>
    <input type='submit' VALUE=OK>
</FORM>

Deprecated tags

  • <center class="container"></center>
  • <div class="container"></div>

<style>
	.container {
		margin: auto;
		}
</style>

HTML5 tags

Divatose

<div class="item-container">
    <div class="item">
        <div class="item-image-container">
            <img class="item-image" src="..." />
        </div>
        <div class="item-content">
            <div class="item-content-inner">
                <div class="item-title">Lorem Ipsum</div>
                <div class="item-pubdate">Dec 2, 2014</div>
            </div>
            <div class="item-description">Lorem ipsum dolor</div>
        </div>
    </div>
</div>
<section class="item-container">
    <figure class="item">
        <img class="item-image" src="..." />
        <div class="item-content">
            <figcaption class="item-title">Lorem Ipsum</figcaption>
            <time class="item-pubdate">Dec 2, 2014</time>
            <p class="item-description">Lorem ipsum dolor</p>
        </div>
    </figure>
</section>

Accessibility

Accessibility for everyone — Roman Liutikov

HTML5 Forms

  • <form method="get">
    <input type="text" name="tel" />
    <input type="password" name="pass" />
    <input type="checkbox" name="save_pass" checked />
    <input type="submit" value="OK" />
</form>
  • <form method="get">
    <input type="tel" name="tel" />
    <input type="password" name="pass" />
    <input type="checkbox" name="save_pass" checked />
    <input type="submit" value="OK" />
</form>
  • <input type="tel" />
  • <input type="url" />
  • <input type="email" />

anchor vs button

  • <a href="#">Close</a>

<a href="javascript:void(0)">Submit</a>

<a>Expand</a>
  • <button type="button">Close</button>

<input type="submit" value="Submit" />

<span>Expand</span>
Push It! — Vadim Makeev

Microdata

schema.org

  • <article>
    <header>
        <h1>Title</h1>
    </header>
    <section>
        <p>Description</p>
    </section>
</article>
  • <article itemscope itemtype="http://schema.org/VideoObject">
    <header>
        <h1 itemprop="name">Title</h1>
    </header>
    <section itemprop="description">
        <p>Description</p>
    </section>
</article>

Data-attributes

  • <section class="item-container" type="teaser">
    <figure class="item">
        <img class="item-image" src="..." orig-url="..." />
        <div class="item-content">
            <figcaption class="item-title">Lorem Ipsum</figcaption>
            <time class="item-pubdate">Dec 2, 2014</time>
            <p class="item-description">Lorem ipsum dolor sit amet</p>
        </div>
    </figure>
</section>
  • <section class="item-container" data-container-type="teaser">
    <figure class="item">
        <img class="item-image" src="..." data-original-url="..." />
        <div class="item-content">
            <figcaption class="item-title">Lorem Ipsum</figcaption>
            <time class="item-pubdate">Dec 2, 2014</time>
            <p class="item-description">Lorem ipsum dolor sit amet</p>
        </div>
    </figure>
</section>

CSS Decencies

CSS Selectors

  • CSS 1
    E,
.class,
#id,
E F { ... }
  • CSS 2
    *,
:first-child,
E > F,
E + F, E ~ F { ... }
  • CSS 3
    :not(),
:enabled, :disabled,
:nth-child(), :nth-of-type() { ... }
  • CSS 4
    :has(),
:matches(),
:empty { ... }
  • .header ul li a { }

div.block div.item:not(.current) a.item-link { }
  • .navigation-link { }

.item-link { }

Graceful Degradation
vs
Progressive Enhancement

Graceful Degradation

  • .element {
	linear-gradient(to left, #600000, #c80000);
	}
  • .element {
	linear-gradient(to left, #600000, #c80000);
	}

.lt-ie9 .element {
	background-color: #920000;
	background-image: url(...);
	}

Progressive Enhancement

  • .element {
	background-color: #920000;
	}

.element:hover {
	background-color: #c80000;
	}
  • .element {
	background-color: #920000;
	transition: background-color linear .2s;
	}

.element:hover {
	background-color: #c80000;
	}

CSS — How To?

.dropdown{
	position:absolute;
	left: 0%;
	top:24px;
	height: 400px\9;
	margin: 3px 0px;
	border: 1px solid #B9B9B9;
	width: 200px; min-height: 300px;
	box-shadow: inset 0 -3px #aaa, 0 2px #eee;
	padding: 10px !important;
	opacity: 0.9 !important;
	color: #333333;
	overflow:hidden; /* chtobi ne vilazil tekst */
	background-color: #fff
	}

One line — one rule

  • .dropdown {
	width: 200px; min-height: 300px;
	}
  • .dropdown {
    width: 200px;
    min-height: 300px;
    }

Semicolon at the end

  • .dropdown {
    background-color: #fff
    }
  • .dropdown {
    background-color: #fff;
    }

Rule — space — value

  • .dropdown{
    position:absolute;
    }
  • .dropdown {
    position: absolute;
    }

Magic numbers

  • .dropdown {
	top: 24px;
	}
  • .dropdown {
	top: 100%;
	}

Zero is always zero

  • .dropdown {
	left: 0%;
	margin: 3px 0px;
	}
  • .dropdown {
	left: 0;
	margin: 3px 0;
	}

CSS Hacks

  • .dropdown {
	height: 400px\9;
	}
  • <!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
  • .lt-ie9 .dropdown {
	height: 400px;
	}

/* or */

.ie8 .dropdown {
	height: 400px;
	}

!important

  • .dropdown {
	padding: 10px !important;
	opacity: 0.9 !important;
	}
  • .dropdown_cute {
	padding: 10px;
	opacity: 0.9;
	}

Colors

  • .dropdown {
	border: 1px solid #B9B9B9;
	color: #333333;
	}
  • .dropdown {
	border: 1px solid #b9b9b9;
	color: #333;
	}

Vendor prefixes

  • .dropdown {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    }
  • .dropdown {
    -webkit-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
    }
  • .dropdown {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    }

Rules with multiple values

  • .dropdown {
	box-shadow: inset 0 -3px #aaa, 0 2px #eee;
	}
  • .dropdown {
	box-shadow: inset 0 -3px #aaa,
	                  0  2px #eee;
	}

Comments

  • .dropdown {
	overflow: hidden; /* chtobi ne vilazil tekst */
	}
  • .dropdown {
	overflow: hidden; /* for text overflow prevention */
	}

That is not all...

CSS Management — Vadim Makeev
  • .dropdown{
    position:absolute;
    left: 0%;
    top:24px;
    height: 400px\9;
    margin: 3px 0px;
    border: 1px solid #B9B9B9;
    width: 200px; min-height: 300px;
    box-shadow: inset
    0 -3px #aaa, 0 2px #eee;
    padding: 10px !important;
    opacity: 0.9 !important;
    color: #333333;
    overflow:hidden; /* ... */
    background-color: #fff
    }
  • .dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 3px 0;
    border: 1px solid #b9b9b9;
    width: 200px;
    min-height: 300px;
    box-shadow: inset 0 -3px #aaa,
                      0  2px #eee;
    color: #333;
    overflow: hidden; /* ... */
    background-color: #fff;
    }

.dropdown_cute {
    padding: 10px;
    opacity: .9;
    }

.lt-ie9 .dropdown {
    height: 400px;
    }

CSS Rules Order

.dropdown {
    // Common behavior rules
	position: absolute;
	left: 0;
	top: 100%;
    // Box model & dimensions
	width: 200px;
	min-height: 300px;
	margin: 3px 0;
	border: 1px solid #b9b9b9;
    // Visual rules applied to box
	overflow: hidden; /* for text overflow prevention */
	box-shadow: inset 0 -3px #aaa,
	0  2px #eee;
	background-color: #fff;
    // Visual rules applied to content
	color: #333;
	}
csscomb.com

Wrong classnames

  • .button {
	padding: 10px 20px;
	border: 1px solid;
	}

.button-red {
	border-color: #f33;
	background: #faa;
	color: #f66;
	}

.button-green {
	border-color: #3f3;
	background: #afa;
	color: #6f6;
	}

.button-blue {
	border-color: #33f;
	background: #aaf;
	color: #66f;
	}
  • .button {
	padding: 10px 20px;
	border: 1px solid;
	}

.button-cancel {
	border-color: #f33;
	background: #faa;
	color: #f66;
	}

.button-success {
	border-color: #3f3;
	background: #afa;
	color: #6f6;
	}

.button-info {
	border-color: #33f;
	background: #aaf;
	color: #66f;
	}
Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

- Martin Goldind

Thanks!

Yevhen Isakov

@is4kov