Лучшие практики Magento CSS файлы

Question

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

Прежде всего, я не смог найти основное описание для всех файлов CSS, поставляемых с Magento. Например, когда используется файл Reset.css?

Но мой больший вопрос: почему Magento делает почти все в Styles.css по умолчанию? Разве не было бы лучшей идеей разделить CSS на несколько меньших файлов и загрузить их в файл Local.xml для разных представлений? Это позволяет больше контролировать стиль элементов.

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

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

Answer 1

Но мой больший вопрос: почему Magento делает почти все в Styles.css по умолчанию? Разве не было бы лучшей идеей разделить CSS на несколько меньших файлов и загрузить их в файл Local.xml для разных представлений? Это позволяет больше контролировать стиль элементов.

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

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

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

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

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

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

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

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

Answer 2

Вы должны посмотреть на это с обеих сторон.

• Браузер, загрузка и рендеринг контента
• Разработчик, написание/редактирование/управление CSS

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

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

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

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

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