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

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

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

miripriuni@WebStandardsDays

Нанокод

Только multiline CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А еще

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

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

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

>__<

Группы

  1. Позиционирование
  2. Поведение и свойства блока
  3. Геометрические размеры
  4. Специальные типы содержимого
  5. Цветовое оформление
  6. Визуальные свойства
  7. Раскладка и печать
  8. Состояние документа
.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

TRBL

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

  1. -webkit-
  2. -khtml-
  3. -moz-
  4. -ms-
  5. -o-
  6. без префикса

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

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

                    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

  1. github.com/miripiruni/CSScomb-for-Vim
  2. github.com/miripiruni/CSScomb/tree/master/cli

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

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

CSScomb.ru

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

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