Репутація українського ІТ. Пройти опитування Асоціації IT Ukraine
×Закрыть

your sass/css stinks!

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

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

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

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

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

Благодарю!

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

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

  1. насколько большая доля/значимость длинных селекторов?
  2. Если много базовых стилей написанных с высоким весом, то это проблема. Базовые стили должны быть максимально простыми. Это влияет на расширяемость, поддержку.
  3. насколько много элементов, для которых написаны длинные селекторы?
  4. Если этих стилей не много и они не расползаются по всей системе, а применяются для конкретного блока, то это меньшее зло.
  5. удобство работы с вложенными блоками стилей
  6. В less/sass удобно группировать блоки стилей по значимому родителю — это улучшает читаемость кода и инкапсулирует все стили относительно модификатора родителя.К примеру:
    
    .search-wrap {
      .search-form {
        ...
        .txt-box {
          ...      
          input {
            ...
          }
        }
        .btn-submit {
          ..
        }
      }
    }
    
    данный код можно улучшить след. образом:1. Вряд ли на форме будет еще 1 «.txt input», следовательно его можно вынести по уровень значимой search-wrap"а, аналогично и .btn-submit. 2. При возможности можно убрать .txt-input"ы от значимой формы и записать все независимо с дополнением/переопределением в этой форме:
    
    .txt-box {
      ...      
      input {
        ...
      }
    }
    .search-wrap {
      .txt { ... }
      input { ... }
     .btn-submit { ... }
      .search-form {
        ...
      }
    }
    
  7. длинные селекторы могут использоваться, если нужно быстро переопределить базовые стили, не имея возможности изменить базовые
  8. Временами помогает, но тут скорее проблема корректности базовых стилей, если их нужно переопределять.
Также важная проблема при написании длинных селекторов, это сложность их переопределения в будущем(нужно писать селектор такого же веса) и проблемы производительности, так как при применении селектора браузер обрабатывает его слева направо, что может увеличить скорость поиска дом-элементов в документе.К примеру:

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

Используйте сервис

Есть сервис www.stylestats.org
«Most Identifier» минус три (ну ок 4)) = количество поджопников верстаку)

І як тут підписатись на топік? ((

Дякую... слона не замітив...

Подписаться на комментарии