Каждый начинающий верстальщик с ростом навыка начинает иметь странное представление о своих навыках. Поделюсь такой просто мыслью: любой профессионал всегда видит куда надо развиваться и что нужно улучшить в своей работе. Но новички страдают от так называемого «замыленного глаза» — когда есть четкое представление, что ты всегда это умел и всегда делал так, а если это получается и даже появилась первая работа — то это верх профессионализма.
Увы, это не так. И я объясню почему. Во первых — все первые работы, которые иной раз, даже не попадают в портфолио — имеют крайне страшный код. Никто не начинал с красивого структурированного CSS. Да, он имел общую идею последовательной стилизации элементов страницы, но это лишь набор хаотичных блоков. Чтобы понять, что уровень навыка вырос и ты способен расти дальше, т.к. если это работает в одну сторону, то и работает в другую.
Обратите внимание на то, как Вы обозначали классы и идентификаторы в своих первых работах. Можете ли Вы все так же уверенно ориентироваться в собственном коде. Что можно сделать более понятным и доступным, что объединить и сделать иначе. Если хотя бы один из вопросов находит у Вас ответ — берите и делайте. Вам это пойдет на пользу и еще через полгода Вы снова найдете что можно будет улучшить. Подтягивайте свои черновики и первые работы в помощь себе завтрашнему.
Обратите внимание а семантику написанного кода. HTML и CSS очень адаптивные языки, можно написать как Вам угодно, но удобно ли это будет? Посмотрите на структуру дерева разметки, способны ли Вы ее представить у себя в голове только взглянув на код? Если Ваше воображение и то что вышло тогда в итоге расходятся — садитесь и переделывайте. Делайте так, чтобы на Вашу разметку было приятно смотреть даже непонимающему человеку. Сделайте свой CSS логически выстроенным, шаг за шагом, с важными комментариями для разбивки.
Используйте SASS для лаконичности CSS. Намного лучше будет вынести отдельно часто используемые цвета, шрифты, размеры, фигуры и границы в отдельный миксин или правило, вставляя его для общего понимая картины. Для того что бы скомпилированный CSS не был моветоном в среде Ваших коллег. Используйте в конечном виде минимизированную версию стилей, чтобы загрузка сайта была мгновенной и т.д. Старайтесь шлифовать Ваш код.
Проверьте свои старые макеты на удовлетворение кроссбраузерности — и проверьте не только через Mozilla, Opera и Chrome, но и установите Safari для полноты картины. И не забывайте про старый добрый IE и Edge. Очень важно чтобы все браузеры одинакового понимали Ваш код, одинакового отображали макет и не было проблем с визуализацией.
Посмотрите на свои верстки и подумайте, а можно ли их посадить на фреймворк для удаление лишнего CSS-кода, может быть Bootstrap или Skeleton будут уместнее и производительнее в данном моменте и т.д. Да, работа будет немаленькая, с точки зрения использования фремворковской разметки и классов, но насколько приятнее станет смотреть на итоговую картину в редакторе. Оно того стоит.
И не так часто, но все же: многие поначалу излишне часто используют !important для принудительного применения тех или иных значений в свойствах. Если у Вас такое было, то смело перелопачивайте CSS, явно проблема в структуре повествования. От данного значения следует отказаться в большинстве спорных решений.
Рефакторинг кода помогает не только понять как далеко ты зашел на поприще WEB-программирования и верстки, но и четко осознать одну мысль — в сторону дальнейшего самосовершенствования и вылизывания кода нужно пройти столько же, а то и больше.