Причеши свой код

miripriuni@WebStandardsDays

Нанокод

Только multiline CSS

#comments-form .grippie {
				height: 13px;
				display: block;
				overflow: hidden;
				color: #ccc;
				padding: 0;
				margin: 0;
				border: 1px solid #ddd;
				border-top-width: 0;
				max-width: 400px !important;
				width: 350px;
				cursor: s-resize;
				background: #eee url(images/resize.gif) no-repeat right center
				}

#comments-form .grippie .counter {
				font-size: 10px;
				padding: 0;
				margin: 0
				}

#comments-form .grippie span {
				display: block;
				float: left
				}

#comments-form .grippie span span {
				display: inline;
				float: none
				}

#comments-form .btn {
				float: left
				}

#comments-form .btn {
				background: url(images/jc_btnl.gif) no-repeat;
				margin-right: 5px
				}

#comments-form .btn div {
				margin: 0 -1px 0 0;
				float: left;
				background: url(images/jc_btnr.gif) 100% 0 no-repeat
				}

#comments-form .btn a {
				text-decoration: none;
				height: 22px;
				line-height: 22px;
				font-size: 12px;
				font-weight: bold;
				color: #777;
				padding: 0px 5px;
				border: none
				}

#comments-form .btn a:hover {
				text-decoration: none;
				color: #0B55C4
				}

#comments-form-smilespanel {
				display: none;
				cursor: pointer;
				padding: 2px;
				max-width: 200px;
				background-color: #fff;
				border: 1px solid #ccc;
				overflow: auto;
				left: 0;
				top: 0;
				position: absolute
				}

#comments-footer, #comments-footer a {
				color: #ccc !important;
				background-color: inherit;
				font: normal 9px Verdana, Arial, Sans-Serif !important
				}

#comments-footer {
				display: block;
				height: 14px;
				border-top: 1px solid #ccc;
				padding-top: 1px;
				margin-top: 4px;
				text-align: right
				}

#comments-footer a {
				text-decoration: none !important;
				text-transform: none;
				padding: 0;
				margin: 0;
				border: none !important;
				float: right;
				background: none !important
				}

Спортивное ориентирование

Я полюбил { Машеньку:болтушку; Юшечку:тихоню; Лизоньку:умницу;
Алиночку:скромницу; Марьяночку:хитрюшу; Оленьку:затейницу;
Наташеньку:отличницу; }

Спортивное ориентирование

Я полюбил { Машеньку:болтушку; Юшечку:тихоню; Лизоньку:умницу;
Алиночку:скромницу; Марьяночку:хитрюшу; Оленьку:затейницу;
Наташеньку:отличницу; }

Легкое восприятие и контекст

					Я полюбил {
					  Машеньку:болтушку;
					  Юшечку:тихоню;
					  Лизоньку:умницу;
					  Алиночку:скромницу;
					  Марьяночку:хитрюшу;
					  Оленьку:затейницу;
					  Наташеньку:отличницу;
					  }

Построчный разбор

					Я полюбил {
					  Машеньку:болтушку;
					  Юшечку:тихоню;/* отрефактори, будь мужиком */
					  Лизоньку:умницу;
					  Алиночку:скромницу;
					  Марьяночку:хитрюшу;
					  Оленьку:затейницу;
					  Наташеньку:отличницу;
					  }

Построчный разбор

					Я полюбил {
					  Машеньку:болтушку;
					  Юшечку:тихоню;/* отрефактори, будь мужиком */
					  Лизоньку:умницу;
					  Алиночку:скромницу;
					  Марьяночку:хитрюшу;
					  Оленьку:затейницу;
					/*Наташеньку:отличницу;*/
					  }

Построчный разбор

					Я полюбил {
					  Машеньку:болтушку;
					  Юшечку:тихоню;/* отрефактори, будь мужиком */
					  Лизоньку:умницу;
					  Марьяночку:хитрюшу;
					  Алиночку:скромницу;
					  Оленьку:затейницу;
					/*Наташеньку:отличницу;*/
					  }

Построчный разбор

					Я полюбил {
					  Машеньку:болтушку;
					  Юшечку:тихоню;/* отрефактори, будь мужиком */
					  Марьяночку:хитрюшу;
					  Лизоньку:умницу;
					  Алиночку:скромницу;
					  Оленьку:затейницу;
					/*Наташеньку:отличницу;*/
					  }

Цель — наглядность

					.t-shirt__xs { font-size: 50% }
					.t-shirt__s  { font-size: 75% }
					.t-shirt__m  { font-size:100% }
					.t-shirt__l  { font-size:125% }
					.t-shirt__xl { font-size:150% }

Селекторы

					#jc .code a, #jc .code a:active, #jc .code a:hover {
					  }

Селекторы

					#jc .code a, #jc .code a:active, #jc .code a:hover {
					  }

Один селектор — одна строка

					#jc .code a,
					#jc .code a:active,
					#jc .code a:hover {
					  }

					#jc .code a, #jc .code a:active, #jc .code a:hover {
					  }

А еще

Придерживайтесь структуры селекторов
Используйте поиск по селекторам и по номеру строки
Можно открыть несколько окон для одного файла

Статья «Преимущества многострочного CSS»:
http://web-standards.ru/articles/multiline-css/

3. Порядок свойств

>__<

Группы

Позиционирование
position top right bottom left z-index
Поведение и свойства блока
display visibility float clear overflow overflow-x overflow-y -ms-overflow-x -ms-overflow-y clip zoom flex-direction flex-order flex-pack flex-align
Геометрические размеры
box-sizing -moz-box-sizing -webkit-box-sizing width min-width max-width height min-height max-height margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left
Специальные типы содержимого
table-layout caption-side empty-cells border-spacing border-collapse list-style list-style-position list-style-type quotes
Цветовое оформление
opacity filter:progid:DXImageTransform.Microsoft.Alpha(opacity= -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity= -ms-interpolation-mode color border border-collapse border-width border-style border-color border-top border-top-width border-top-style border-top-color border-right border-right-width border-right-style border-right-color border-bottom border-bottom-width border-bottom-style border-bottom-color border-left border-left-width border-left-style border-left-color -webkit-border-radius -moz-border-radius border-radius -webkit-border-top-right-radius -moz-border-top-right-radius border-top-right-radius -webkit-border-bottom-right-radius -moz-border-bottom-right-radius border-bottom-right-radius -webkit-border-bottom-left-radius -moz-border-bottom-left-radius border-bottom-left-radius -webkit-border-top-left-radius -moz-border-top-left-radius border-top-left-radius -webkit-border-image -moz-border-image -o-border-image border-image -webkit-border-image-source -moz-border-image-source -o-border-image-source border-image-source -webkit-border-image-slice -moz-border-image-slice -o-border-image-slice border-image-slice -webkit-border-image-width -moz-border-image-width -o-border-image-width border-image-width -webkit-border-image-outset -moz-border-image-outset -o-border-image-outset border-image-outset -webkit-border-image-repeat -moz-border-image-repeat -o-border-image-repeat border-image-repeat outline outline-width outline-style outline-color outline-offset background filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= background-color background-image background-repeat background-attachment background-position background-position-x -ms-background-position-x background-position-y -ms-background-position-y background-clip background-origin background-size box-decoration-break -webkit-box-shadow -moz-box-shadow box-shadow -webkit-box-shadow -moz-box-shadow box-shadow -webkit-box-shadow -moz-box-shadow box-shadow -webkit-box-shadow -moz-box-shadow box-shadow filter:progid:DXImageTransform.Microsoft.gradient -ms-filter:'progid:DXImageTransform.Microsoft.gradient text-shadow
Визуальные свойства
content counter-reset counter-increment resize cursor nav-index nav-up nav-right nav-down nav-left -webkit-transition -moz-transition -ms-transition -o-transition transition -webkit-transition-delay -moz-transition-delay -ms-transition-delay -o-transition-delay transition-delay -webkit-transition-timing-function -moz-transition-timing-function -ms-transition-timing-function -o-transition-timing-function transition-timing-function -webkit-transition-duration -moz-transition-duration -ms-transition-duration -o-transition-duration transition-duration -webkit-transition-property -moz-transition-property -ms-transition-property -o-transition-property transition-property -webkit-transform -moz-transform -ms-transform -o-transform transform -webkit-transform-origin -moz-transform-origin -ms-transform-origin -o-transform-origin transform-origin -webkit-animation -moz-animation -ms-animation -o-animation animation -webkit-animation-name -moz-animation-name -ms-animation-name -o-animation-name animation-name -webkit-animation-duration -moz-animation-duration -ms-animation-duration -o-animation-duration animation-duration -webkit-animation-play-state -moz-animation-play-state -ms-animation-play-state -o-animation-play-state animation-play-state -webkit-animation-timing-function -moz-animation-timing-function -ms-animation-timing-function -o-animation-timing-function animation-timing-function -webkit-animation-delay -moz-animation-delay -ms-animation-delay -o-animation-delay animation-delay -webkit-animation-iteration-count -moz-animation-iteration-count -ms-animation-iteration-count -o-animation-iteration-count animation-iteration-count -webkit-animation-iteration-count -moz-animation-iteration-count -ms-animation-iteration-count -o-animation-iteration-count animation-iteration-count -webkit-animation-direction -moz-animation-direction -ms-animation-direction -o-animation-direction animation-direction text-align text-align-last -ms-text-align-last text-align-last vertical-align white-space text-decoration text-emphasis text-emphasis-color text-emphasis-style text-emphasis-position text-indent -ms-text-justify text-justify text-transform letter-spacing word-spacing -ms-writing-mode text-outline text-transform text-wrap text-overflow -ms-text-overflow text-overflow-ellipsis text-overflow-mode -ms-word-wrap word-wrap word-break -ms-word-break -moz-tab-size -o-tab-size tab-size -webkit-hyphens -moz-hyphens hyphens
Раскладка и печать
unicode-bidi direction break-after break-before break-inside columns column-span column-width column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width page-break-before page-break-inside page-break-after
Состояние документа
orphans widows zoom max-zoom min-zoom user-zoom orientation

.example {
    margin-left:1em;
    font-family:'PT Sans', sans-serif;
    font-size:48px;
    display:-moz-inline-box;
    display:inline-block;
    padding:2em .5em .5em;
    font-weight:bold;
    letter-spacing:1px;
    margin:1em;
    }

.example {
    display:-moz-inline-box;
    display:inline-block;
    margin:1em;
    margin-left:1em;
    padding:2em .5em .5em;
    letter-spacing:1px;
    font-weight:bold;
    font-size:48px;
    font-family:'PT Sans', sans-serif;
    }

.example {
    display:-moz-inline-box;
    display:inline-block;
 
    margin:1em;
    padding:2em .5em .5em;
 
    letter-spacing:1px;
    font-weight:bold;
    font-size:48px;
    font-family:'PT Sans', sans-serif;

TRBL

Вендорные префиксы

-webkit-
-khtml-
-moz-
-ms-
-o-
без префикса

Статья «Префикс и постхак»

Вендорные префиксы

					border: 1px solid #999;
					-webkit-border-radius: 3px;
					 -khtml-border-radius: 3px;
					   -moz-border-radius: 3px;
					    -ms-border-radius: 3px;
					     -o-border-radius: 3px;
					        border-radius: 3px;

CSScomb.ru

Новинки декабря 2011

Ближайшие планы

Sublime Text 2
Захват мира: публикации

CSScomb.ru

Спасибо за внимание

Причесывайте:	CSScomb.ru
Спрашивайте, не кусаюсь:	twitter.com/miripiruni
Смотрите презентацию:	miripiruni.org/comb-your-code/

Вячеслав Олиянчук, Яндекс