Структура И Оптимизация Css

uniq · 16.Февраль.2018 00:00:00

Здравствуйте,

Подскажите, где почитать про структуру и принцип формирования CSS?

Как я понял, он формируется из разных LESS файлов, который разбиваются

По трем папкам в теме: Tygh (Стандартные - базовые), lib (там одна библиотека jqueryui) и addons (CSS и LESS от плагинов и доп.разработки).

Опишу проблемы.

На стандартной теме размер сжатого (убито форматирование) CSS состоит из двух файлов на 290 Кб.

На моей - модифицированной теме - уже один сжатый файл и 540 Кб или не сжатый 625 Кб (!!!)

Извините, но это полный треш!

Сколько мы знаем использование LESS позволяет задавать переменные, их мы можем использовать для задания стандартных вещей, такие как Шрифты, Цвета, определенные параметры для полей форм, блоков, теней и тп.

Отсюда у меня ряд вопросов:

1. Как формируется итоговый CSS, перезаписываются ли переменные из addons или одни добавляются к уже имеющимся в стандарте?

2. Какие CSS обновляются при апгрейде версий? Т.к. в базе тоже есть косяки, и устаревшие конструкции, которые не позволяются сделать нормальным отображением на разных типах устройств. Поэтому нужно начинать как-то править и чистить.

3. Данный CSS используется только для frontend'a?

ecomlabs · 16.Февраль.2018 00:00:00

В английских дока есть статья, в каком порядке все подключается и как устроено

https://docs.cs-cart.com/4.7.x/designer_guide/css.html

uniq · 19.Февраль.2018 00:00:00

В английских дока есть статья, в каком порядке все подключается и как устроено

https://docs.cs-cart.com/4.7.x/designer_guide/css.html

Да, супер! Как всегда есть на английском, а на русском фигу.

Только опять одна проблема, все кратно-сжато и непонятно, даже на английском.

Style files (css and less) including order
All the css files are included through hooks: pre (that are added by an add-on).

All the css files are included in the order as they are defined in the file: design/themes/basic/templates/common/styles.tpl

All the css files are included through hooks: post (that are added by an add-on).

All the less files are included through hooks: pre (that are added by an add-on).

All the less files are included in the order as they are defined in the file: design/themes/basic/templates/common/styles.tpl

All the less files are included through hooks: post (that are added by an add-on).

All the inline styles that are added to the design/themes/basic/templates/common/styles.tpl template with the tag.

The preset less file is included.

All the styles added to the Custom CSS field in the Theme Editor.

Hooks including styles are processed in the order that is defined by priority.

Если данный список является ПОРЯДКОМ, тогда используется не символьный список, а список с нумерацией.

Или хотя бы первое предложение должно содержать at first.

Теперь читаем последнее предложение. Немного дословно. Хуки включаются препроцессором в стили в порядке определенным приоритетом. Каким приоритетом? Где он определяется? Списком вверху? Так там уже указан порядок, он же и приоритет? Или опять все через ...

И ответа на вопрос - добавляются или перезаписываются стили тут нет. Чувствую, что делается грязно - добавляется, раздувая код.

P.S. Простите, но начинает реально бесить. Чем глубже лезешь в дебри, тем больше понимаешь, насколько грязный код CS-Cart.

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

cs-cart_team · 19.Февраль.2018 00:00:00

Теперь читаем последнее предложение. Немного дословно. Хуки включаются препроцессором в стили в порядке определенным приоритетом. Каким приоритетом? Где он определяется?

Имеется в виду приоритет модулей. Приоритет модуля задается в addon.xml и после установки модуля хранится в базе (таблица cscart_addons)

uniq · 19.Февраль.2018 00:00:00

Имеется в виду приоритет модулей. Приоритет модуля задается в addon.xml и после установки модуля хранится в базе (таблица cscart_addons)

Спасибо! Нашел 114 файлов, просмотрел, в большинстве случаев приоритет от балды стоит.

Может быть, тогда ответите на самый важный вопрос - добавляются или перезаписываются стили?

Для примера.

Берем код корневого style.less

body, p, div, li {
    color: @font;
    font-size: @body_font_size;
}

где по-умолчанию заданы переменные:

@font:#333

@body_font_size:14px

Т.е. препроцессор LESS выдаст итоговый код

body, p, div, li {
color: #333;
font-size: 14px;
}

Теперь устанавливаем два модуля А и В.

Модуль А имеет приоритет 100 и значения:

@font:#000

@body_font_size:12px

Модуль В имеет приоритет 10 и значения:

@font:#666

@body_font_size:16px

Вопрос, что будет в итоговом файле?

Ест два варианта.

Первый логичный, должно быть одно значение с самым высоким приоритетом.

body, p, div, li {
color: #666;
font-size: 16px;
}

Но возможен и второй вариант, менее логичный, но допустимый.

/// От модуля В, где самый высокий приоритет 10.
body, p, div, li {
color: #666;
font-size: 16px;
}
/// От модуля А, где приоритет 100

body, p, div, li {

color: #000;

font-size: 12px;

}
/// От штатного значения, которое должно быть без приоритета, т.е. самым низким.

body, p, div, li {

color: #333;

font-size: 14px;

}

Что будет в итоге?

И приоритет считается как - больше число - выше приоритет, или наоборот?

masterok · 01.Март.2018 00:00:00

Спасибо! Нашел 114 файлов, просмотрел, в большинстве случаев приоритет от балды стоит.

Может быть, тогда ответите на самый важный вопрос - добавляются или перезаписываются стили?

Для примера.

Берем код корневого style.less
body, p, div, li {
    color: @font;
    font-size: @body_font_size;
}
где по-умолчанию заданы переменные:

@font:#333

@body_font_size:14px

Т.е. препроцессор LESS выдаст итоговый код
body, p, div, li {
color: #333;
font-size: 14px;
}
Теперь устанавливаем два модуля А и В.

Модуль А имеет приоритет 100 и значения:

@font:#000

@body_font_size:12px

Модуль В имеет приоритет 10 и значения:

@font:#666

@body_font_size:16px

Вопрос, что будет в итоговом файле?

Ест два варианта.

Первый логичный, должно быть одно значение с самым высоким приоритетом.
body, p, div, li {
color: #666;
font-size: 16px;
}
Но возможен и второй вариант, менее логичный, но допустимый.
/// От модуля В, где самый высокий приоритет 10.
body, p, div, li {
color: #666;
font-size: 16px;
}
/// От модуля А, где приоритет 100

body, p, div, li {

color: #000;

font-size: 12px;

}
/// От штатного значения, которое должно быть без приоритета, т.е. самым низким.

body, p, div, li {

color: #333;

font-size: 14px;

}
Что будет в итоге?

И приоритет считается как - больше число - выше приоритет, или наоборот?

Модуль В подключится быстрее по приоритету, а значит перепишет стиль. Я так делал модуль, который абсолютно все стили переписал со стандартной темы. Если что и не перепишет, добавьте к свойству класса !important

ecomlabs · 02.Март.2018 00:00:00

Uniq, для ваших целей еще есть чистая тема Boilerplate с минимумом CSS

https://github.com/cscart/cscart-boilerplate

uniq · 02.Март.2018 00:00:00

Модуль В подключится быстрее по приоритету, а значит перепишет стиль. Я так делал модуль, который абсолютно все стили переписал со стандартной темы. Если что и не перепишет, добавьте к свойству класса !important

Правильно ли я понял, что xml с большим числом приоритета - перезапишет стиль последним? Про атрибут important, я знаю.

Uniq, для ваших целей еще есть чистая тема Boilerplate с минимумом CSS

https://github.com/cscart/cscart-boilerplate

Зачем мне предлагать костыль? У меня кастомный дизайн.

Минимум CSS, это когда разработчик пишет чистый код, использует преимущества препроцессора и общую структуру с переменными, а не "тяп-ляп". Это в огород не Cs-carta, а мододелов.

ecomlabs · 02.Март.2018 00:00:00

Правильно ли я понял, что xml с большим числом приоритета - перезапишет стиль последним? Про атрибут important, я знаю.

Да, все верно

Зачем мне предлагать костыль? У меня кастомный дизайн.
Минимум CSS, это когда разработчик пишет чистый код, использует преимущества препроцессора и общую структуру с переменными, а не "тяп-ляп". Это в огород не Cs-carta, а мододелов.

Не поймешь вас - много кода - плохо, мало кода - тоже плохо :)