×Закрыть
NodeJs/Golang Developer
  • your sass/css stinks!

    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 правило.
    Поддержал: Andrii Podanenko