Успех и CSS

Успех и CSS

Как пользоваться успехом у женщин с помощью CSS

Василий Половнёв, Flatstack

Проблемы CSS

• вертикальное центрирование
• колонки одинаковой высоты
• верстка для IE6
• хаки

Нет уверенности, что изменения в стилях не сломают что-то еще.

Люди боятся вносить изменения, потому что не могут предсказать последствия.

Каскад, каскад

        ul {
          padding: 1em 0 1em 1.5em;
        }
      

        .nav ul { padding: 0 }
        .footer .contacts ul { padding: 0 }
        .oh-please-stop-it { padding: 0 }
      

        .projects {
          ul.tests {
            li.test .contents {
              .inner_contents {
                .description_container {
                  width: 50%!important;
                }
              }
            }
          }
        }
      

        .article .title { color: $so-cool-blue; }
        .widget .title { color: $wow-so-red; }
      

        <article class="article">
          <h2 class="title">Hurr Durr</h2>
        
          <div class="widget">
            <h2 class="title">Imma sheep</h2>
          </div>
        </article>
      

CSS — не только средство визуального дизайна, это код.

CSS с хорошей архитектурой предсказуем, его легко поддерживать, масштабировать и использовать повторно. А писать такой CSS помогают методологии, своды правил и рекомендаций.

БЭМ

.block{__element[--modifier]}
      

Для пацанов

.block{-element[--modifier]}
      

        .article__title {}
        .widget__title {}
        .article__title--outstanding {}
        .article--new {}
      

Каскад, каскад

— Начинаем с ресета. У блоков нет внешних зависимостей

Плоские классы и модификаторы

        li.test .contents {
          .inner_contents {
            .description_container {
              width: 50%!important;
      

        .test__description--tiny { width: 50% }
      

Точно не пересекутся

        .article__title {}
        .widget__title {}
      

Методологии

• БЭМ, Блок-Элемент-Модификатор от Яндекса
• MVCSS, Modular View CSS от Envy, CodeSchool
• SMACSS, Scalable and Modular Architecture for CSS
• MCSS, Multilayer CSS от Одноклассников
• OOCSS, Object-Oriented CSS
• OPOR, микро-методология Артема Сапегина