Я думаю, что если у вас возникли проблемы с размером ваших css-файлов, то пришло время переосмыслить вашу стратегию стиля .C в CSS означает каскадирование.Довольно часто, когда CSS-файлы становятся слишком большими, это происходит из-за того, что стили не используются повторно в случае необходимости, а также из-за плохого использования каскадного поведения.
Я не говорю это просто.Я работал над некоторыми крупными и сложными розничными сайтами и в настоящее время над очень сложными приложениями для финансовой торговли.Всякий раз, когда я сталкивался с сайтами с более чем несколькими сотнями стилей, мы добивались значительных улучшений в дизайне, снижения сложности и улучшения удобства обслуживания за счет уменьшения сложности CSS.
Для начала нужно выполнить поиск Google на css reset .Существует несколько различных реализаций, но они обычно следуют теме переопределения различий в компоновке для каждого из браузеров и удаления произвольных границ, полей, отступов и т. Д. Начиная с чистого листа, если хотите.Затем вы можете продолжить работу над созданием своих стилей, стараясь максимально использовать каскадные и css цепочки
Цепочки - это то, где у вас более одногокласс по элементу.Например:
<div class="box right small"></div>
box может иметь несколько общих стилей, которые вы можете применить ко многим элементам блока, например, div, h1 ... h6, p, ul, li, table, blockquote, preформа.small говорит само за себя right может быть просто выровнен вправо, но с отступом в 4 пикселя справа.Без разницы.Дело в том, что вы можете иметь несколько классов на элемент и создавать стили из многократно используемых строительных блоков - группировок отдельных настроек стиля.В противном случае он называется классами.
На очень простом уровне ищите возможности для объединения стилей:
, поэтому:
h1 {font-family: tahoma, color:#333333; font-size:1.4em;}
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}
становится
h1, h2, h3 {font-family: tahoma, color: #333}
h1 {font-size:1.4em;}
h2 {font-size:1.2em;}
h3 {font-size:1.0em;}
Только немного меньше, но делайте такие вещи много раз, и вы можете что-то изменить.
Кроме того, Подтвердите свой CSS .Это поможет вам обнаружить ошибки в вашем коде.