Введение
Что бы понять, как работает та или иная технология, нужно применить её на практике. Но чтобы понять почему нужно применять именно эту технологию в дальнейшем, нужно выполнить проект с использованием ваших старых методов, а затем с использованием только что изученной технологии. Многим может показаться иррациональным, выполнение уже сделанной работы, но это очень хороший способ для учёбы, который наглядно показывает преимущества и недостатки сравниваемой технологии.
Что было в начале
В начале второго курса нам задали сверстать простой макет сайта ювелирного магазина. Опыта в вёрстке у меня тогда было мало, поэтому на выполнение этого простого задания у меня ушло достаточно много времени. Тогда я ещё не знал, что существуют групповые селекторы, которые позволяют сократить общий код. Что существует технология flex box, которая гораздо облегчает реализацию адаптивности. Не знал, о существовании препроцессоров и систем сборки. Код я писал в обычном блокноте, о функциональности и возможностях которого лучше промолчать. Да и фотошопа у меня не было, поэтому пришлось использовать редактор gimp.
Как изменился проект и процесс работы при повторном выполнении
Когда я уже поднабрался опыта, я решил сделать проект заново. У меня уже был установлен фотошоп и редактор кода Visual Studio Code, а также набор необходимых к нему плагинов. Время написания кода при помощи этого редактора сократилось буквально в десятки раз, как и количество ошибок. Достаточно было набрать первую букву свойства, и оно дополнялось само. Используя display: flex вместо абсолютного позиционирования, я сократил количество строк кода в 2 раза, а адаптивность добивалась путём изменения всего пары свойств (flex-direction и justife-content). Затем все общие свойства я начал задавать через групповые селекторы, и код стал более читаемым. Также я начал применять методологию именования классов, которая сделала код более структурированным и поддерживаемым. До этого все css классы писались в одном файле и часто шли без чёткого порядка, и найти их было проблематично. Специальный плагин обеспечил кроcсбраузерность сразу всех свойств автоматически.
Резюме
Повторное написание кода (выполнение проекта) позволяет понять, где и в каких условиях требуется та или иная технология и как и какие инструменты и редакторы помогают упростить жить. Эффективность можно оценить по тому, сколько времени вы потратили, и насколько сократился ваш код.
