Организация css для больших сайтов

Question

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

Итак, когда я начал работу на своем последнем сайте, я начал с этой же философии. Он работал нормально для моих первых нескольких страниц, и пока я только тестировал в firefox ...

Однако, когда мой сайт рос, и когда я добавлял страницы, несколько макетов (и браузеров), я нашел, что эта философия сломалась очень быстро. В конечном счете в течение долгого времени я переехал в следующий подход:

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

2. Я сохраняю конкретные стили CSS для каждой страницы.

3. Я держу определенные стили CSS для элементов страницы встраиваемой/управления

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

Что делают другие люди при приближении к этому? Это хороший/плохой подход ... Я вижу недостатки такого подхода, некоторые страницы очень похожи, поэтому значительное изменение означает изменение кода css, я также чувствую, что профессионалы перевешивают это на ежедневной основе.

Что думают другие разработчики об этой философии? Хорошо? Плохо? Просто любопытно действительно ...

Для меня это одна из тех ситуаций, когда я взвешивал разницу между моими идеалами (я стараюсь придерживаться очень жесткого кода) и разочарование меняющихся требований на одной странице, разбивая еще 20 страниц, потому что я изменил ширину div на несколько пикселей (например, опрокидывание float на другой странице).

Спасибо за ваш вклад

Answer 1

Так же, как и любой другой тип кода, если вы копируете код CSS повсюду, вы на рожон. С течением времени обслуживание будет становиться все труднее и труднее.

Лучший способ не иметь проблем с изменением на одной странице, влияя на другие страницы в ущерб, - это иметь руководство по стилю, которое управляет вашим дизайном и дизайном интерфейса. Если ваше руководство по стилю отклоняет классы HTML и CSS для использования для данного элемента дизайна, они всегда будут отображаться одинаково на всех страницах. Если элемент определенной страницы нужно изменить, вы меняете HTML для использования другого класса, а затем создаете новый CSS для этого класса (и добавляете его в свой стиль для повторного использования). Руководство по стилю также позволяет убедиться, что ваш HTML является единообразным для всех разработчиков, работающих на сайте, что означает, что даже меньше шансов на изменения CSS, вызывающие проблемы, поскольку вы делаете больше развития.

Еще один момент, который необходимо запомнить с помощью CSS, заключается в том, что каждый из этих файлов .css, которые вы создаете и ссылаетесь на страницу, является HTTP-запросом. Если каждая страница и элемент управления имеют свой собственный CSS-файл, вы действительно наносили вред своим пользователям на сайте, увязывая общее время загрузки запроса для каждого запроса на одну страницу. Это также делает менее вероятным для их браузера кеширование.css-файлы, потому что кеш имеет ограниченное пространство, поэтому, если вы продолжаете заполнять его все больше и больше .css-файлов, они будут быстрее удаляться из кеша. Да, вы можете комбинировать файлы .css программно в обработчике, чтобы ваша страница делала только один запрос на страницу, но тогда у вас есть дополнительные служебные данные сервера, и проблема кэширования по-прежнему остается (если только у вас нет единого запроса для всех файлов .css на вашем сайте , который побеждает цель того, что вы пытаетесь сделать здесь в любом случае).