После завершения фронтенд-работы многие люди забывают структуру и детали проекта. Однако код не будет полностью доработан сразу. В оставшееся время будут проводиться постоянные работы по техническому обслуживанию, и эти работы невозможно выполнить самостоятельно. Следовательно, хорошо структурированный код может значительно оптимизировать его удобство сопровождения. Вот пять способов улучшить удобство обслуживания ваших CSS-файлов, которые являются лучшим руководством по стилю CSS.
1. Разбейте свои стили
Для небольших проектов перед написанием кода разделите код на несколько блоков по структуре страницы или содержимому страницы и дайте комментарии. Например, вы можете разделить глобальные стили, макеты, стили шрифтов, формы, комментарии и другие элементы на несколько разных блоков, чтобы продолжить работу.
Для более крупных проектов это, очевидно, не будет иметь никакого эффекта. На этом этапе стиль необходимо разбить на несколько разных файлов таблиц стилей. Приведенная ниже основная таблица стилей является примером такого подхода, и ее основная задача — импортировать другие файлы стилей. Использование этого метода может не только оптимизировать структуру стилей, но и помочь уменьшить количество ненужных запросов к серверу. Существует множество способов разложения файлов, и основная таблица стилей использует наиболее распространенный из них.
/*---------------------------------------------------------------- ------------------ [Основная таблица стилей] |
В то же время для больших проектов вы также можете добавить флаги обновления для CSS-файлов или некоторые диагностические меры, которые здесь не будут подробно описаны.
2. Создайте индекс файла CSS.
Чтобы быстро понять структуру всего файла CSS, рекомендуется создать индекс файла в начале файла. Одним из возможных методов является построение древовидного индекса: структурный идентификатор и класс могут стать ветвью дерева. следующее:
| /*---------------------------------------------------------------- ------------------ [Макет] * тело + Заголовок / #header + Контент / #контент - Левый столбец / #leftcolumn - Правый столбец / #rightcolumn - Боковая панель / #sidebar - RSS/#rss - Поиск / #поиск - Коробки / .box - Боковой блог / #sideblog + Нижний колонтитул / #footer Навигация #navbar Рекламные объявления Заголовок контента h2 ——————————————————————-*/ |
Или это также можно сделать:
/*---------------------------------------------------------------- ------------------ [Оглавление] -------------------------------------------------- ------------------*/ |
Другой способ — просто сначала перечислить содержимое без отступов. В приведенном ниже примере, если вам нужно перейти к разделу RSS, вы просто ищете 8.RSS.
/*---------------------------------------------------------------- ------------------ [Оглавление] -------------------------------------------------- ------------------*/ /*---------------------------------------------------------------- ------------------ |
Определение такого стиля поиска может эффективно облегчить другим чтение и изучение вашего кода. При работе над большими проектами вы также можете распечатать поиск для удобства чтения кода.