Как обрабатывать изменения модулей CSS в адаптивном дизайне, используя ooccss и smacss
Я изучаю лучшие практики и методологии CSS, такие как OOCSS и SMACSS, для использования в проекте среднего масштаба, который использует Twitter Boostrap 3 и LESS. Я начинаю понимать эти методы, но у меня возникают проблемы с поиском способов реагирования на адаптивный дизайн и связь между модулями CSS.
Например, допустим, у меня есть модуль кнопок со всеми видами кнопок, используемых в проекте (цвет, форма, размер). Как я мог сделать кнопку изменить в зависимости от устройства. Одна и та же кнопка должна быть большой на мобильном и обычной на рабочем столе. После OOCSS у меня должно быть 2 класса скинов, таких как btn- default и btn- large. Но так как HTML одинаков для каждого устройства, я не могу переключить этот класс в HTML. Также использование медиазапроса в CSS модуля, который бы изменял размер кнопки в зависимости от размера устройства, не кажется хорошей идеей, так как я бы связывал модуль с этой конкретной потребностью (и что, если я хочу, чтобы обычная кнопка в мобильный позже?).
В качестве другого примера, у меня есть модуль раздела продукта, который имеет различные возможные макеты (вертикальный / горизонтальный). Что делать, если я хочу использовать вертикальное расположение на рабочем столе и горизонтальное в мобильном. У меня точно такая же проблема. Я легко могу создать 2 разных подмодуля (product -horiz, product-vert), но не могу их изменить.
Я мог бы использовать javascript для переключения классов, но это не правильно и сломал бы дизайн с отключенным JS. Вы могли бы сказать мне, что, возможно, дизайн неправильный, если элемент так сильно меняется от одного устройства к другому, но это будет реальным ограничением, чтобы ограничить это.
Так что вы думаете об этой проблеме. Есть ли какая-то обобщенная практика, используемая для этого?
2 ответа
Ваш базовый стиль кнопки должен быть определен в модуле кнопки в вашем файле modules.scss. Примените любые стили, которые будут выходить за пределы всех кнопок. Затем обработайте различия в вашем файле smacss states.scss (скомпилирован последним). В вашем файле состояний должен быть один раздел 'button', в котором вы обрабатываете медиа-запросы и уникальные классы, которые изменят внешний вид кнопки. Надеюсь, это поможет, я могу уточнить, если вам нужно.
Чтобы использовать ваш пример для кнопок:
Мобильный телефон также является планшетом, а планшеты имеют различные размеры области просмотра, которые равны размеру рабочего стола. Медиа-запросы не обнаруживают такие функции, как касание, поэтому создание медиа-запроса предназначено только для визуальных изображений с таким размером области просмотра. Рекомендуется использовать большие кнопки и большие области щелчков для толстых пальцев для каждого устройства, если только вы не выполняете обнаружение функций с помощью js, таких как.touch .btn- {большие стили}. Я использую небольшой скрипт, чтобы поставить .no-touch а также .touch на моем HTML, но я не потрудился сделать большие области только для. Touch. Я делаю их для всего, если это вообще возможно.