Урок №18. Перепроектирование CSS3-кода (рефакторинг)


         

Урок №18. Перепроектирование CSS3-кода (рефакторинг)

Перепроектирование кода (часто употребляется его английский эквивалент "рефакторинг") это переписывание существующего кода без изменения его функций. Он применяется для повышения читабельности кода, уменьшения его сложности, приведения к современным стандартам и повышения качества кода в целом.

Каждый раз, когда программист вносит некоторые изменения в CSS3-код, происходит перепроектирование кода. Если говорить в общем плане, то оно всегда применяется после окончания работы над проектом (то, что образно называется вылизыванием кода). Далее - после добавления каких-нибудь новых возможностей.

Важно понимать, что не существует единых подходов к перепроектированию (рефакторингу) CSS3-кода. У каждого программиста есть свои излюбленные способы улучшения и упрощения собственного кода. Вместе с тем существуют основные принципы, которыми стоит руководствоваться:

- использование общих правил выбора селекторов CSS3 вместо специфических, чтобы избежать написания индивидуальных правил для каждой небольшой части отображаемого на экране монитора содержимого веб-страницы. Это также ускоряет работу браузера, т.к. сокращает объём кода;
- размещение общих правил CSS3 в начале, ниже - более специфических. Это связано с тем, что браузер читает CSS3-код сверху вниз, соответственно нижняя часть кода более важна и содержит специфические (уточняющие, индивидуальные) правила.

С чего начать рефакторинг CSS3-кода:
- отладка веб-страниц и исправление ошибок
- приведение кода в соответствие с последними стандартами / использование лучших подходов
- поиск неиспользуемых или редко используемых (например, только на главной странице сайта) частей кода

         

Страница обновлена 23 октября 2022 года.