Успех и CSS

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

Успех и CSS

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

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

 

Проблемы CSS

Настоящая проблема — страх

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

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

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

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

Методологии

Что бы вы ни выбрали, не забывайте

CSS — тоже код