Как писал Компьюций,

В программировании примерно 30% времени уходит на собственно программирование, а остальные 70% – на придумывание имён переменных и функций.

Это же справедливо и для верстки.

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

Из инструментария.
1. Хорошо бы перейти на BEM от нашего всеми любимого Яндекса.
2. Использовать препроцессоры css типа less или sass, что значительно упрощает как чтение, так и редактирование css.
3. Поисковые системы, в которых можно найти ответ на вопрос.
4. Youtube с профильными уроками.
5. Светлая голова, которая может подсказать правильные решение и подход.
6. Инструмент вроде map для любимого IDE.
7. Сам IDE, который в разы упрощает жизнь. Варианты, лучшие на мой вкус: Brackets, Atom, WebStorm.

Зависит от проекта. Обычно заказчик сам подкидывает нужные переходы уже в макете. Если их нет, то вот стандартные для меня:
- 1440+
- 980 или 960 (по ситуации) -- здесь часто меняются размеры шрифтов, немного меняется сетка, иногда меню летит в бутер.
- 768 -- меню точно в бутер, меняются размеры шрифтов, сетка обычно становится списком.
- 540 или 480 (зависит от того, что в данный момент не влезает или плохо смотрится) -- и эти же ширины должны смотреться нормально вплоть до 320.

Это мои стандартные ИМХО. Повторюсь, при иных проектах бывают и совершенно безумные брейки вроде 865, 433 и прочее.. Но это большая редкость и, как правило, продиктовано придирчивостью клиента к передаче макета.

В цсс примерно так. Думаю, принцип будет понятен:

Есть, конечно, и более гибкие варианты на svg, но можно и на чистом цсс так: