flapflapjack
@flapflapjack
Нажимательщик кнопков

Нужно ли использовать препроцессоры CSS?

Давно не заходил на тостер, и вдруг наткнулся на вопрос о препроцессорах CSS. Стало интересно - что это за зверь.

Почитал несколько сайтов с описанием, что это и для чего. Посмотрел примеры. Но ничего не понял - а зачем? В чем смысл?

Суть моего вопроса:

1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

.hello {
color:red;
font-size: 11px;
}


и применять его ко всем элементам, где это нужно.
Какая разница - вписать в HTML

<a href="\" class="oneclass hello">hello</a>

или использовать в файле стиля переменную, которую так же придется добавлять к какому-то желаемому типу объектов? Мне совсем не понятно.

2) Валидность CSS.

Препроцессор компилирует ваш "красивый сахарный" синтаксис в валидный CSS.
А в чем сложность писать сразу валидный CSS? Тоже не совсем понятно.

3) Компилятор из препроцессорного языка в CSS.

Ну это же дополнительный инструмент! Зачем городить что-то еще, если все и так без всяких компиляций работает. Куча программ на компьютере - тоже лишнее.

4) Удобочитаемость кода, и простой поиск,

Ну, это я тоже не пойму. Любой нормальный редактор кода умеет по нажатию горячей клавиши приводить все отступы и т.д. в порядок. Код становится красивым и читабельным. Да и мне не понятно - что такого в CSS может быть не читаемым? Есть класс, а в фигурных скобках - свойства. Что тут нечитабельное может быть?

Поиск - тоже не вижу сложности. В браузере - F12, он выстроит красивое дерево элементов с их стилями, а у каждой строчки стиля указан файл и строка, в которой это свойство указано. Даже можно мышкой тыкнуть, и откроется окно с указанным файлом и искомой строкой.

5) Возможность инклюда (include) в препроцессорах.

Можно же в HTML файле инклюдить нужные CSS через link rel=... . Чем инклюд в препроцессорах удобней, чем эта стандартная возможность?

Создал пару файлов CSS, и суй их в HTML там где они тебе нужны. В админке - один, в гостевой книге - другой, в фотоальбоме - третий, или смешивать при необходимости. Ведь если называть классы элементов с умом, то никаких пересечений не получится, и все будет работать.

6) Вложенность свойств.

Не понимаю, каким образом такой код:

.block {
.sub_block {
color: red;
}
}


удобочитаемей, чем обычный CSS:

.block > .sub_block {color:red;}

7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах - какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?

P.S. Я не в коем случае не критикую новые направления, но я просто дано не изучал ничего нового, не использую фреймворки, так как и так все отлично работает.

Могу предположить, что такая ситуация у меня слоилась из-за того, что я в основном пишу маленькие проекты, а в больших проектах это действительно как-то помогает, но я не могу представить такую ситуацию.
  • Вопрос задан
  • 1354 просмотра
Решения вопроса 4
DevMan
@DevMan Куратор тега CSS
достаточно только первого пункта.
когда захотите поиграться шрифтами, цветом, размерами и придется бегать по всему файлу или файлам для их изменения, вместо правки переменных в одном месте.

2) ни о чем.
3) при нынешних объемах дисков и размере этих самых компиляторов говорить об этом не имеет смысла.
5) инклюды в препроцессоре дают возможность разбить весь css на отдельные небольшие и логичные файлы, с которыми проще работать, и на выходе сольют их в один файл, а не n разных в случае link rel. это хорошо в плане client-side optimization, хотя для хомяков и не критично.

разумеется в препроцессорах нет никакой магии, и можно обойтись без них. но они делают вашу работу проще и вас продуктивнее.
а нужно вам это или нет - решайте сами.
Ответ написан
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

Ну, одно дело добавлять к селектору в css, другое дело захламлять html, а там уже сложнее будет менять класс (т.к. html может генерироваться как угодно).
2) Валидность CSS.

Ай, да на это пофиг, есть и другие средства для проверки.
3) Компилятор из препроцессорного языка в CSS.

Ну там легкий скриптик выполняется в сборщике автоматом (на webpack, gulp, parcel и.т.д.). Особо ничего не нагружает, на ssd при сохранении файла scss меньше чем за секунду компилируется css.
4) Удобочитаемость кода, и простой поиск,

А тут как раз наоборот. Искать по scss гораздо сложнее, т.к. нельзя врубить поиск по целому селектору. Но если стоит Sourcemap (грубо говоря, который учит инструменты разработчика хрома понимать scss), то уже можно спокойно смотреть в хроме номер строки, название классов и.т.д.
5) Возможность инклюда (include) в препроцессорах.

Оптимизация. Пока не пришел http 2, все ресурсы желательно склеивать, скрипты, стили и даже картинки в спрайты. Один файл грузится быстрее чем несколько, т.к. достаточно одного http запроса. С приходом http2 будет пофиг.
6) Вложенность свойств.

Ну вот смотри, есть у меня такая менюшка
<nav class="menu">
   <ul class="menu__list">
      <li class="menu__item menu__item_active">
         <a href="#" class="menu__link">Menu 1</a>
      </li>
      <li class="menu__item">
         <a href="#" class="menu__link">Menu 2</a>
      </li>
   </ul>
</div>

В css мой код на БЭМ будет выглядеть вот так
.menu {

}
   .menu__list { }
   .menu__item { }
      .menu__item_active { }
      .menu__item:hover { }
   .menu__link { }

а на scss вот так

.menu {
   &__list { }
   &__item { 
      &:hover { }
      &_active { }
   }
   &__link { }
}

проще и лаконичнее. Но этой слишком простйо пример. Там еще можно добавлять медиазапросы, дополнительные модификаторы.

7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах - какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?


Это больше для вендорных префиксов и всяких полифилов. Это по моему в PostCSS юзается через doiuse, точно не знаю, в scss с таким не сталкивался. Обычно пофиг на старые ie.

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

В маленьких проектах чаще да, если нет готового сборщика, то удобнее сразу писать прототип на css. Но сейчас любой фрейморк в пару команд позволяет добавить поддержку scss.

Это удобная штука, не нужно ее бояться, не нужно бояться webpack, фреймворки, но и не нужно фанатеть, это просто инструменты.
Ответ написан
Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.
препроцессоры - эволюционный путь. Вы спрашиваете много раз обкатанные вопросы. Но вы так же не можете не наступать на те же грабли, делая эволюцию самостоятельно в рамках свого опыта.
Просто начните их использовать. Это дефакто стандарт.
Ответ написан
Mi11er
@Mi11er
A human...
  1. Переменные.
  2. Наследования
  3. Вложенность
  4. Авто-префиксы


Вот 4 основных причины для меня.
Если вы пришли сюда , чтоб убедить себя использовать или нет, то это странно. Проще сделать 1 проект с помощью препроцессора и понять, нужно оно вам или нет.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы