Как работать с мелкими css-файлами?

Question

[Иван Лещенко]

Я работаю верстальщиком около года, за это время стили всегда писал в одном большом файле "main.css", куда подключал css-reset, фонт-фейсы, основные стили, стили плагинов, в общем, абсолютно все стили.

Недавно я понял, что хорошая практика во фронтенде - разбивать js- и css-файлы на маленькие составляющие модули при разработке, и склеивать все в один болшой на продакшене.

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

Вопрос в следующем - как работать с маленькими css-файлами? Просто прописывать в head пути к файлам при разработке, а на продакшене склеивать в один? Или использовать для этого grunt и ему подобные инструменты, и как это лучше делать?
С grunt'ом никогда не работал, только-только начал ковырять.

Есть ли какой-то best-way в этом вопросе?

Answer 1

[Сергей Протько]

Есть best-way, использовать препроцессоры стилей (less/sass) + gulp

Comments

[Иван Лещенко]

Смотрю настройки gulp - кажутся более простыми и легкими в освоении, чем grunt. Спасибо за наводку.

[Максим Дунаевский]

Надеюсь, моя статья Вам поможет в настройке Grunt'а: dunmaksim.blogspot.ru/2014/08/grunt.html

Answer 2

[Виталий Киренков]

Возможно я отвечу немного оффтоп, но всё же.

Что плохого в едином стилевом файле? Едином - это значит в нём все стили относящиеся к вёрстке сайта, за исключением базовых стилей плагинов, подключения шрифтов. Ресет - как по мне так вообще вселенское зло, от него только проблемы у меня всегда были...

Comments

[Иван Лещенко]

1. Я всегда работал с одним файлом стилей, но когда он растягивается больше, чем на 2 тысячи строк, с ним становится не очень удобно работать. Когда же переменные, миксины и стили разбиты по своим файлам, работать должно быть удобнее. Это мое предположение, я еще так не работал.
2. Странно, я без ресета работать вообще не могу. Где-то вылезет лишний отступ, паддинг, размер шрифта или ширина инпута - и, главное, во-всех браузерах по-разному.

[Виталий Киренков]

"Я работаю верстальщиком около года". Я 7 лет работаю...)) И раскидывать на много файлов - неудобно. Пример: у вас ксс - шаблона, шапки, плагинов - и всё это единовременно открыто, а вам нужно найти один класс. Вам придётся постоянно скакать по закладкам - это потеря времени.
Я не знаю, вы стили пишете столбиком или в строку - ибо 2000 строк в двух этих вариантах абсолютно разный загруз...

[Сергей Протько]

@DeLaVega то есть за 7 лет вы ни разу не пользовались препроцессорами стилей, не баловались с веселыми штуками типа autoprefixer и считаете все это бесполезной штукой? Ясно понятно.

Что до прыганья по разным закладкам... если вы так разресли стили и вам их так править приходится что нужно прыгать - то может вы чего не так сделали? Вот честно, я ни разу не припомню такого кейса. Все стили разбиты на модули, блоки, виджеты... называйте как хотите. Изменения чего-то одного - один файл. Если вы меняете в разных файлах что бы добиться изменений в чем-то одном, то что-то пошло не так со структурой стилей.

[Илья Лесных]

Всякие препроцессоры *ss появились и набрали популярность относительно не давно, кмк, так что логично, что 7 летний динозавр уже привык все писать в каком-то стили, и не интересуется нововведениями, которые сходу изучает новичок.

[Виталий Киренков]

@Fesor Я что, где то написал, что я пишу на голом ксс? Дядя, вы читаете между строк как то...
Во-первых я пишу на less.
Во-вторых - я написал конкретно про reset, что бесполезная вещь, ибо с опытом приходит понимание, что конкретно нужно сбрасывать, и в итоге когда собираешь собственный базовый шаблон, стили ресета занимают гораздо меньше и ты знаешь, что конкретно ты обнулил.
В-третьих автопрефиксером не пользуюсь, ибо не вижу смысла, так как всё это за меня делают миксины.
Ясно? Понятно?

[Виталий Киренков]

@Aliance Ага, и в таблицах верстаю. А можно как то иначе, да?

[Сергей Протько]

@DeLaVega просто вы написали про один main.css. Не верно вас понял. Что до autoprefixer - это просто позволяет избавиться от миксинов в принципе и сохранять код всегда в актуальном состоянии. Правда с поддержкой мобильных платформ бывают проблемы (особенно с flex-box-ами под android).

Что до reset.css полностью согласен, хотя нормалайзеры я например использую.

[Сергей Протько]

@DeLaVega и да, я общался с людьми которые считают все эти препроцессоры дурной модой, среди верстальщиков вообще как правило много консерваторов как мне показалось.

[Виталий Киренков]

@Fesor Ну вот и отлично, а бочку катить из за невнимательности - не хорошо. Тем более, что я нигде .css не упомянул.
И что вам даёт избавление от миксинов? Их можно использовать как функции и тогда они вообще будут компилиться только в том месте, где их вызывали. Плюс гибкости больше.

[Виталий Киренков]

@Fesor "Верстальщики" как таковые - вымирающий вид, куда более востребованы - фронтэндеры.

[Сергей Протько]

@DeLaVega у меня миксины и используются как функции. Просто нету этих ненужных и скучных миксинов с префиксами. Как бы профита не так много, просто симпатишнее становится когда в исходниках вообще нету префиксов и лишних миксинов.

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

Вообще есть кучи вещей которые минимизируют скуку.

Answer 3

[vsuhachev]

Поглядите на sprockets, по всем признакам это то что вам нужно. Эта библиотека используется в RubyOnRails как раз для сборки css, js и умеет компилировать scss/sass, CoffeeScript

Для сборки используются т.н. файлы-манифесты (свои для css и js) в которых вы указываете что должно быть упаковано в результирующий файлы (css и js соответственно).

Например манифест для css, в нем используются команды
require_self - включить в сборку сам манифест (то, что после комента-манифеста)
require path/filename - включить конкретный файл, как правило это сторонние компоненты
require_tree . - включить все файлы из каталога, в данном примере все что лежит в каталоге с манифестом

/*
 *= require_self

 *= require bootstrap-datepicker
 *= require select2
 *= require select2-bootstrap
 *= require dropzone-basic

 *= require_tree .
 */

Тут пример как это все запустить

Answer 4

[rie]

Modernizr.load();
Хотя все зависит от того, что у вас на бекенде.

Answer 5

[Александр Зачиналов]

Хочу писать стили в маленьких sass-файлах.

Вопрос в следующем - как работать с маленькими css-файлами

вы определитесь сначала для себя что все таки использовать sass или css. Пишите мелкие sass, заводите еще один sass, главный, в котором подключаете все мелкие, в тело страницы подключаете только этот главный, затем заливаете. В майновом sass всегда легко можно что-то подключить/отключить, вот вам и модульность. Не сможете на sass, по тому же принципу пилите на less, разницы в схеме не будет.

Answer 6

[Павел Мышкин]

Я делаю main.less а в нем:

@import "mixins";
@import "variables";
@import "reset";
@import "typography";
@import "grid";

и т.д.
Тоже можно и на SCSS сделать.
Его потом в CSS и продакшн.
Не пользуюсь грунтами и гульпами для склейки файлов в один потому, что они не умеют склеивать их в том порядке, каком я хочу.