Рефакторинг коду html і css шлях самовдосконалення

Рефакторинг коду html і css шлях самовдосконалення

Кожен верстальник з ростом досвіду починає мати дивне уявлення про свої навички. Поділюся такої просто думкою: будь-який професіонал завжди бачить куди треба розвиватися і що потрібно поліпшити в своїй роботі. Але новачки страждають від так званого «замилений очі» - коли є чітке уявлення, що ти завжди це вмів і завжди робив так, а якщо це виходить і навіть з'явилася перша робота - то це верх професіоналізму.

На жаль, це не так. І я поясню чому. По-перше - все перші роботи, які іноді, навіть не потрапляють в портфоліо - мають вкрай небезпечний код. Ніхто не починав з красивого структурованого CSS. Так, він мав загальну ідею послідовної стилізації елементів сторінки, але це лише набір хаотичних блоків. Щоб зрозуміти, що рівень навику виріс і ти здатний рости далі, тому що якщо це працює в одну сторону, то і працює в іншу.

Зверніть увагу на те, як Ви позначали класи і ідентифікатори в своїх перших роботах. Чи можете Ви все так само впевнено орієнтуватися у власному коді. Що можна зробити більш зрозумілим і доступним, що об'єднати і зробити інакше. Якщо хоча б один з питань знаходить у Вас відповідь - беріть і робіть. Вам це піде на користь і ще через півроку Ви знову знайдете що можна буде поліпшити. Підтягуйте свої чернетки і перші роботи в допомогу собі завтрашнього.

Використовуйте SASS для лаконічності CSS. Набагато краще буде винести окремо часто використовувані кольори, шрифти, розміри, фігури і кордони в окремий миксин або правило, вставляючи його для загального розуміючи картини. Для того що б скомпільований CSS не був моветоном в середовищі Ваших колег. Використовуйте в кінцевому вигляді мінімізовану версію стилів, щоб завантаження сайту була миттєвою і т.д. Намагайтеся шліфувати Ваш код.

Перевірте свої старі макети на задоволення кросбраузерності - і перевірте не тільки через Mozilla, Opera і Chrome, але і встановіть Safari для повноти картини. І не забувайте про старий добрий IE і Edge. Дуже важливо щоб всі браузери однакового розуміли Ваш код, однакового відображали макет і не було проблем з візуалізацією.

І не так часто, але все ж: багато хто спочатку надмірно часто використовують! Important для примусового застосування тих чи інших значень у властивостях. Якщо у Вас таке було, то сміливо перелопачувати CSS, явно проблема в структурі оповідання. Від даного значення слід відмовитися в більшості спірних рішень.

Рефакторинг коду допомагає не тільки зрозуміти як далеко ти зайшов на терені WEB-програмування і верстки, а й чітко усвідомити одну думку - в бік подальшого самовдосконалення і вилизування коду потрібно пройти стільки ж, а то й більше.

Схожі статті