CSS: Как создать класс, который добавляет медиа-запрос к уже существующему классу без указания параметров?

Question

[Григорий Васильков]

Не знаю как сделать, у кого-нибудь есть мысли?

.block__element {
  text-align: left;
}
.block__element_textalign_center {
  text_align: center;
}

???
.media_min320_max960 {
}

Основная задача - реже лазить в CSS в условиях часто изменяющегося ТЗ. Сегодня начальник говорит что делаем под 320, завтра говорит - переделывай под 360. Хочется изменить в верстке класс на 360 и чтобы все начало работать под 360, не изменяя самих медиазапросов.

Безусловно можно написать что-то вроде:

@media (max-width: 961px) and (min-width: 320px)
.block__element_textalign_center {
  text_align: center;
}

или даже заранее создать классы под каждое разрешение...
Основная проблема - что таких свойств с блоками и элементами могут быть не одно и не два, а пару десятков, а иногда несколько свойств, то есть это все "заранее" не задать, иначе файл стилей, написанный под 250 разрешений будет весить 40 мегабайт (даже если его циклом формировать)

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

То есть иметь класс, который как бы говорит "если есть я, то связанный со мной класс работает в том разрешении в котором я скажу"

Есть такой способ?

Answer 1

[iBird Rose]

используй sass или less и задавай ширину в переменной. итого тебе нужно будет изменить всего одну переменную с 320 на 360 к примеру.

Comments

[Григорий Васильков]

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

Хорошо когда проект написан с нуля самим собой и там все стили сделаны на less и sass, тут скорее прикол возникает когда разработка... назовем ее модульной - условно говоря на говно-проект ты устанавливаешь свою библиотеку и пишешь отдельно каждый модуль. И когда надо переделать - получается нужно все модули заходить и менять, что нормальный такой фронт когда модулей даже 10 штук. А если их станет 100... страшно

[Григорий Васильков]

Опять же, проблема вылезла именно при разработке в пределах компании, где сегодня так завтра так, тут не влазит, тут не подходит... казалось бы сделай себе класс с припиской _mobile и меняй в CSS в едином месте, прикол в том, что устройств тысячи, под каждое класс не сделать, по итогу приняли решение именовать классы min320_max768 например, и получается чтобы переделать 320 на 360 - нужно править не только верстку, но и все классы стилей или править или копировать. Хочется иметь пресет заранее, который добавил к элементу и оно работает строго там где должно