Лучшие практики файлов css Magento

У меня есть несколько вопросов о файлах css, поставляемых с magento, и о лучших методах внесения в них изменений.

Во-первых, я не смог найти базовое описание для всех css-файлов, поставляемых с magento. Например, когда используется файл reset.css?

Но мой главный вопрос в том, почему magento делает почти все в styles.css по умолчанию? Не было бы лучшей идеей разделить css на несколько файлов меньшего размера и загрузить их в local.xml файл для разных представлений? Это позволяет лучше контролировать стиль элементов.

Например, можно создать файл css для простых представлений продукта и загрузить файл в local.xml и еще один для сгруппированных продуктов.

Еще один вопрос, который у меня есть, касается стилей -moz-*. Почему они находятся в файле styles.css, а не в файле css для firefox? Если я использую Opera (или любой другой браузер), они показывают эти стили как ошибки, потому что они о них не знают.

Author: Darokthar, 2013-04-30
Source

2 answers

Но мой главный вопрос в том, почему magento делает почти все в styles.css по умолчанию? Не было бы лучшей идеей разделить css на несколько файлов меньшего размера и загрузить их в local.xml файл для разных представлений? Это позволяет лучше контролировать стиль элементов.

Нет, лучше бы не было. Отдельные файлы CSS приведут к большему количеству HTTP-запросов, которые замедлят работу вашего веб-сайта. Я полагаю, что у вас есть 2 варианта здесь:

1) Оставайтесь с 1 большим CSS-файлом, но уменьшите его

2) Разделите их на несколько файлов меньшего размера, чтобы повысить читаемость для себя, и автоматически объедините их с помощью расширения Fooman Speedster Magento.

Еще один вопрос, который у меня есть, касается стилей -moz-*. Почему они находятся в файле styles.css, а не в файле css для firefox? Если я использую Opera (или любой другой браузер) они показывают эти стили как ошибки, потому что они не знаю о них ничего.

AFAIK считается общепринятой практикой делать это таким образом. Существует больше недостатков при написании каждого конкретного стиля браузера в отдельном файле.

Например, просто добавьте его так для закругленных углов:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

В зависимости от того, какой браузер использует посетитель, будет применен соответствующий стиль. Браузеры, которые не поддерживают эти свойства, просто покажут вам квадратные углы.

 2
Author: Kenny, 2013-04-30 11:02:29

Вы должны взглянуть на это с обеих сторон.

  • Браузер, загрузка и отображение контента
  • Разработчик, пишущий/редактирующий/управляющий CSS

Браузеру требуется как можно меньше файлов, объединенных и уменьшенных. А также в идеале иметь как можно меньше и как можно более простых CSS (т. Е. не имеющий 1+ уровней иерархической зависимости).

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

Именно поэтому обработка CSS (например. SASS/МЕНЬШЕ) существует. Таким образом, вы можете иметь простой, чистый и прокомментированный CSS, структурированный так, как вам нравится, но браузер получает комбинированный файл и оптимизированный файл. Так что это дает вам лучшее из обоих миров.

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

Что касается ввода CSS, делайте то, что делает разработку наиболее эффективной удобно для вас. Но что касается вывода, постарайтесь убедиться, что у вас как можно меньше файлов, оптимизированных и защищенных от обмана, насколько это возможно.

 2
Author: Ben Lessani - Sonassi, 2013-05-02 07:31:38