Как правильно покдлючать css, js?

Question

[User Unknown]

Допустим у меня есть несколько страниц, на каждой из них есть свои "родные" стили, стили для плагинов и сами плагины js. Как мне все организовывать и подключать если на одной странице есть слайдер, а на другой нет. Там где есть туда и подключать или сохранить все в один файл? Отдельные стили для футера, хедера тоесть base-стили тоже отдельно лепить?

Answer 1

[sergey]

например использовать препроцессор sass( его архитектуру) и сборщик gulp, ознакомиться с принципами их работы и подобный вопрос отпадет сам по себе.
UPD: подключать максимум по два: main.css и vendor.css, аналогично с js. Чем меньше тем лучше.

Comments

[User Unknown]

я и так юзаю стайлус и галп. мне интересно, что если у меня 10 страниц и на 3 из них есть слайдер, как в таком случае быть. Пихать во всю пачку стилей и джсок или на тех страницах отдельно подключить?

[sergey]

AndrewN1: подключаете на всех страницах один и тот же, ниже уже написали как это будет срабатывать.

[User Unknown]

Sagan: хорошо, спасибо. Это какая-то общая практика?

[sergey]

AndrewN1: да, к примеру у меня проекты 35-40 страниц, и я всегда так делаю, есть общий стиль для каждой страницы

[User Unknown]

Sagan: у вас есть какой-то пример на GitHub? очень хотелось бы посмотреть

[sergey]

пример чего?

[User Unknown]

Sagan: масштабного сайта, с большим кол-вом страниц

[sergey]

это коммерческие проекты в основном и на github их компания не выкатывает

[User Unknown]

Sagan: а вообще на гитхабе у вас есть что-то? дайте линк

[sergey]

к этому вопросу имеющее отношение - нет, тогда зачем линк

[User Unknown]

Sagan: а что вы думаете на счет коллизии в таких случаях?

[sergey]

AndrewN1: какой коллизии?

[User Unknown]

подключили мы один css файл на 20 страниц, и на каких-то двух страницах два одинаковых класса, но с разным контекстом

[sergey]

AndrewN1: такого не должно быть, используйте BEM

[User Unknown]

Sagan: ок, спасибо за ответы

Answer 2

[Алексей Струков]

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

Comments

[User Unknown]

а что вы думаете на счет коллизии в таких случаях?

[Алексей Струков]

AndrewN1: какие коллизии имеете ввиду? Есть допустим 5 страниц, на 2 и 5 предположим есть слайдер. При загрузке каждой страницы код выполняется с нуля, вешает евент листенеры или генерирует хтмл для js-компонентов. Код для слайдера, перед тем как повесить себя на страницу html должен убедиться, что на ней есть требуемый селектор, допустим .slider-component. Внутри JS происходит проверка типа:

if (document.querySelectorAll(".slider-component").length !== 0) {
  // здесь происходит инициализация компонента
}

Если на странице в html есть селектор от слайдера, тогда код выполнится, а иначе он пропустится и никаких коллизий не произойдет

[User Unknown]

Алексей Струков: подключили мы один css файл на 20 страниц, и на каких-то двух страницах два одинаковых класса, но с разным контекстом

[Алексей Струков]

AndrewN1: так не должно быть. Ошибка в написании CSS. Если исправлять не вариант - можно в этот раз подключить разные стили на разные страницы. Скачается чуть больше килобайтов, но в целом это не критично.