Decencies, The

Yevhen Isakov

11 March, 2016

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

Decencies, The Yevhen Isakov 11 March, 2016

Page Layouts, The – Yevhen Isakov

epam-front-end-school-lectures

Page Layouts, The – Yevhen Isakov

0 0 (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); })();

decencies

Decencies, The

Yevhen Isakov

Bad code

Why?

HTML Decencies

doctype

<! doctype html>

html5 is not only about doctype

Freedom?

Deprecated tags

HTML5 tags

Divatose

Accessibility

HTML5 Forms

anchor vs button

Microdata

schema.org

Data-attributes

CSS Decencies

CSS Selectors

Graceful Degradation vs Progressive Enhancement

Graceful Degradation

Progressive Enhancement

CSS — How To?

One line — one rule

Semicolon at the end

Rule — space — value

Magic numbers

Zero is always zero

CSS Hacks

!important

Colors

Vendor prefixes

Rules with multiple values

Comments

That is not all...

CSS Rules Order

Wrong classnames

Thanks!

Yevhen Isakov

0 0