your sass/css stinks!

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Приветствую!

В первую очередь обращаюсь к нашим фронт-енд коллегам.

Я, как бекенд разработчик, слышал о признаках плохого кода. Например слишком большое колличество вложенностей или размеров функций. Знаю есть даже такие инструменты как phpmd для автоматического статического анализа кода в том числе и на cyclomatic complexity.

Но как быть с фронт ендом? Вижу иногда у себя в проектах селекторы длинной с строку (4-5 уровней вложенности) и понимаю, что явно тут не все в порядке. Ведь можно просто попросить бекенд разработчика поменять вывод и добавить уникальный класс вместо этого страшилища. Вижу как легко sass позволяет все это генерировать, но это не техническая проблема а скорее ответственности разработчика. Большой минус в этом случае это невозможность переиспользовать уже существующие стили.

А теперь главный вопрос — какие вы знаете признаки плохого кода в css / sass? Как вы оцениваете качество стилизации? Поделитесь пожалуйста советами. Если существуют какие-либо автоматические инструменты для оценки это вообще будет просто супер.

Благодарю!

Теми: CSS, Front-end, sass

Ctrl + Enter

Юджин Юджин NodeJs/Golang Developer 14.06.2014 11:53

1. Длинные селекторы — это в большинстве случаев минус, так как уменьшают скорость парсинга/применения стилей и увеличивают вес селектора.
2. Но в реальности, все зависит от ситуации:

насколько большая доля/значимость длинных селекторов?
насколько много элементов, для которых написаны длинные селекторы?
удобство работы с вложенными блоками стилей


.search-wrap {
  .search-form {
    ...
    .txt-box {
      ...      
      input {
        ...
      }
    }
    .btn-submit {
      ..
    }
  }
}


.txt-box {
  ...      
  input {
    ...
  }
}
.search-wrap {
  .txt { ... }
  input { ... }
 .btn-submit { ... }
  .search-form {
    ...
  }
}

длинные селекторы могут использоваться, если нужно быстро переопределить базовые стили, не имея возможности изменить базовые

Также важная проблема при написании длинных селекторов, это сложность их переопределения в будущем(нужно писать селектор такого же веса) и проблемы производительности, так как при применении селектора браузер обрабатывает его слева направо, что может увеличить скорость поиска дом-элементов в документе.К примеру:


div.foo .baz li { ... }

В данном случае браузер сначала найдет все li в документе, потом все li у которых родителем является .baz, потом результирующее множество отфильтрует по родителю с классом .foo, а потом увидит, кто из них имеет tagName div и попробует применить каждое css правило.

Відповісти

Підтримати