Правильное оформление стилей. Лучше всё пихать в style.css или распределять по разным файлам?

Question

[Евгения Сатонина]

Здравствуйте.
Скажите, как лучше (правильнее) оформлять стили. Всё пихать в style.css или распределять по разным файлам и подключать их в html ? Просто у меня в проекте слайдер, сейчас ещё всплывающее окно, и мне как-то удобнее создать файл style.css, slider.css, modal.css и все это подключить. Читается как-то проще... Или это не правильно?

Answer 1

[iBird Rose]

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

Comments

[Евгения Сатонина]

Это моя первая верстка самостоятельная. Пока я только изучил html+css и знаю, что такое webstorm -) Что-то слышал о препроцессорах, но пока понятия не имею что-это )

[Sanes]

Евгений Сатонин: Пока разделяй, чтобы самому не зашпариться. А объединить сможешь обычным копипастом.

[Nwton]

https://habrahabr.ru/post/57012/

[iBird Rose]

Nwton: я не про него. я про sass'овский к примеру. он работает иначе.

Answer 2

[justdealman]

Чем меньше запросов к серверу, тем лучше. Рекомендуется собирать все один. То же самое касается js библиотек и плагинов.

Answer 3

[Tom Nolane]

ИМХО: один файл style.css должен в себя включать всё (общее), что есть на других страницах (на всех). Если где-то css используется для слайдера (а он на одной/двух страницах) то лучше прикрепить отдельный css к этой html странице с css описанием это слайдера (мало ли, человек не зайдёт на эту страницу.. зачем ему грузить "лишнее"). И так по каждому... Но, если всё "вперемешку" и очень муторно так делить - то лучше всё тогда в одном css файле. Особо роли не сыграет на "скорость".. если конечно не описываете 10 000 html страниц... Сам лично делаю один главный css, отдельно css для слайдера (предпочитаю с помощью css3 делать слайдеры, а не через js) и т.д. "+" от этого - удобно искать и редактировать/добавлять то, что нужно. В вашем случае - больше "правильно", чем "неправильно". Хотя однозначно сказать никто не сможет.

Comments

[Евгения Сатонина]

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

[Tom Nolane]

Евгений Сатонин: css загружается в "память" браузера - и если браузер открыл на одной странице, и потом "встретил" на другой - грузить уже не будет (если по размеру совпадает), он возьмёт из "памяти". modal - прикрепить можно как удобно вам. лично я, прикрепил к каждой html, где он нужен. и впринципе.. так будет "правильно". Нежели искать в Н-кол-ве строк основного css где там modal.
p.s. ставьте комментарии в css - описывайте какой блок описывается (меню, главный frame и т.д.) так легче будет ориентироваться... т.к. по опыту могу сказать: не раз придётся "лазить в css" и править.

[Tom Nolane]

скажу более: лет 10-15 назад, когда скорость интернета была слишком медленной - этот вопрос был бы существеннее, чем сейчас. Сейчас в принципе - это не влияет. Но вы должны делать в первую очередь для себя: как удобнее для вас. Но "увлекаться" не стоит. Не вижу смысла делать (к примеру) более 10 различных css.

[Sanes]

Tom Nolane: Сейчас другая проблема. Мобильный интернет и дохлые смартфоны/планшеты.

[Tom Nolane]

Sanes: общий "вес" css будет практически одинаковым в обоих случаев. и если "одинаково" - то лучше делать как мне "удобно" (тем более, это более "академически правильно")

[Sanes]

Tom Nolane: Дело не в общем весе, а в кол-ве запросов на сервер. Это потерянное время.

Answer 4

[sergey]

Начинайте знакомится с препроцессорами и системами сборки, это как раз самое время, что бы не заниматься не нужными делами и не учиться не правильному.
Что дает скажем Вам система сборки gulp с препроцессором sass: в процессе верстки используете столько файлов сколько необходимо, а вот на выходе проекта: все это объединятся в два файла: свои стили - main.css и библиотеки vendor.scss, аналогично и с скриптами.