Для верстки многостраничного сайта, писать css для каждой в отдельном файле?

Question

[Андрей Самойленко]

Учусь верстке. Подскажите, если у сайта не одна страница, то для каждой нужно писать css в отдельном файле? допустим main.css , about.css и т.д. ? С одной стороны кажется пихать все в один файл неправильно, но ведь на страницах много одинаковых элементов, таких как header, footer. Сильные отличия только у главной.

Comments

[Фёдор]

Посмотрите в сторону препроцессоров SASS / Less / PostCss. Если нет времени разбираться со сборщиками. То есть всякие программы, например Prepross. Он будет компилировать ваши .less / .sass-файлы в css.

[Ankhena]

но ведь на страницах много одинаковых элементов, таких как header, footer.

Ага, вот так, по компонентам и раскладывайте по файликам при разработке. А не по страницам.

А итоговый файл собирайте один.

[Андрей Самойленко]

Фёдор, Ankhena, спасибо за ответы. Буду изучать Sass и сборщики. Просто раньше я верстал только лэндинги и все в одном файле, а сейчас нужно сверстать многостраничник

[Ankhena]

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

[Фёдор]

Ankhena, А можете скинуть пару полезных ссылок о компонентном подходе? Пытался разобраться по документации БЭМ. Но что-то не пошло. В плане подачи информации с офф.сайта.

[Ankhena]

Фёдор, я бы как раз туда и дала ссылку...
Классический БЭМ, в котором и для блока и для элемента создаются свои папки и файлы, для обычных сайтов, наверное, перебор. И вполне достаточно разбиения один блок - один файл стилей. Аналогично можно поступать и с разметкой, используя какой-нибудь шаблонизатор, twig, nunjucks и с js.
А потом все это собирается галпом или вебпаком.

Answer 1

[inkShio]

если у сайта не одна страница, то для каждой нужно писать css в отдельном файле?

нет

но ведь на страницах много одинаковых элементов, таких как header, footer.

вот и ответ на твой вопрос.
Делаешь много разных файликов input, textarea, button, footer, header и т.д. После с помощью gulp или webpack склеиваешь их в один.
Зайди на github и посмотри сборки, многое прояснится.
Вот одна из многих статей.

Comments

[Андрей Самойленко]

привет, спасибо за ответ. Я еще пока не знаю что такое gulp или webpack но слышал где-то. Пока что только на чистом css верстаю, даже без препроцессоров.

[inkShio]

Андрей Самойленко, если без сборщиков, то пиши все в одном файле, но посмотри что такое БЭМ. Поможет потом ориентироваться в файле. Если в кратце Б-блок, Э-элемент, М-модификатор.
.button - блок
.button__icon - элемент
.button__text - элемент
.button_dark - модификатор, вдруг у тебя такая же кнопка только потемнее цветом должна быть внизу страницы

<button class="button">
  <span class="button__icon">ICON</span>
  <span class="button__text">TEXT</span>
</button>

и с модификатором
<button class="button button_dark">
  <span class="button__icon">ICON</span>
  <span class="button__text">TEXT</span>
</button>

[Андрей Самойленко]

inkShio, спасибо, да я сейчас как раз про это читаю. А если у button допустим будет белый background а у button_dark черный, то какой из стилей будет применяться? ведь у тэга сразу два класса будет с разными стилями.

[inkShio]

Андрей Самойленко, вот пример, то что ты пишешь ниже будет переопределяться.
Вариант 1 - ок
Вариант 2 - не ок, кнопка не становиться красной, т.е. модификатор выше основного стиля.

Answer 2

[iBird Rose]

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

Comments

[Андрей Самойленко]

спасибо за ответ, буду учить Sass и cсборщики.