Как правильно верстать(структура css)?

Question

[7a-666]

Я верстаю от большего к меньшему и использую бутстраповскую сетку. Я думал как сделать css максимально понятным и простым и сначала использовал такой подход:

• Общие стили для блоков: к примеру я задаю им шрифты, цвет фона и т.д что будет повторяться у большинства
  
• Стили к мобильной версии
  
• Стили к планшетам
  
• Стили к ноутбукам и тд
  

Но чем больше растет код тем больше я в нём путаюсь и не удобно постоянно вспоминать есть ли это в общих стилях и где-то идёт повторение и я подумал избавиться от общих стилей чтобы было примерно так:

1. Мобильная версия(тут я задаю основу всего)
   
2. Планшеты (я меняю то что мне надо поменять) ну и тд
   

Разделяю я это дело медиа запросами проблема в том что планшеты не наследуют стили мобильной версии.

1) Можно ли сделать так чтобы большее(размеры) наследовало меньшее(размеры)?
2) Есть ли методики лучше чтобы было удобно мне и было потом легко продвигать код другому человеку?

Comments

[Ankhena]

Разумный подход - mobile-first.
Т.е. сначала верстается мобильная версия и затем расширяется.

Можно ли сделать так чтобы большее(размеры) наследовало меньшее(размеры)?

Собственно, если не переопределите, то они и унаследуются.

[7a-666]

Ankhena, точно я осознал что я поставил медиа запрос на мобильную версию и он ограничивал это всё спасибо за ответ)

Answer 1

[Арсений Матыцин]

Я не очень понял, что за структура, отдельные стили для каждого медиазапроса чтоль? Но да не суть.

1. Первым делом должны быть описаны общие стили для блоков. Без медиазапросов. Многие объединяют это с мобильными стилями, а потом переопределяют. Можно и без переопределения сделать.
2. Повышаешь запросами «от» (min-width) вьюпорта, тогда переопределяется то, что изменяется, остальное входит в пакет.

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