Рекомендации по структурированию кода CSS

Question

Я создаю дизайн для веб-приложения среднего размера. Это мой первый раз, и на моем рабочем месте нет установленного процесса проектирования. Предыдущие проекты представляют собой небольшие внутренние приложения, а сторонний разработчик использовал минимальный дизайн, достаточный для того, чтобы выравнивать материал там, где он должен.

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

Я был на это какое-то время, и теперь я замечаю, что создал какой-то хаос. Когда у меня есть элемент и вам нужно изменить определение его стиля, мне всегда нужно пройти через Inspect Element, а затем функцию поиска Visual Studio, которая по-прежнему достаточно эффективна. Но я также часто обнаруживаю, что я смотрю определения в таблице стилей, не имея представления о том, для чего они предназначены, или если они все еще используются - возможно, мы уже выбросили элементы, которые их используют, или они были попыткой решить проблему, которая получила лучшее решение.

Я уже пытаюсь дать хорошие семантические имена моим классам, но этого недостаточно, а иногда даже невозможно - каждое обходное решение, которое я использую, похоже, оставляет меня такими именами, как .centeringWrapper.

Что такое хорошая, работоспособная структура кода CSS, которая предотвращает эти проблемы? Какие принципы я могу применить для организации кода?

• Как я могу разделить код на файлы, чтобы найти нужный файл?
• Как структурировать код внутри файлов, чтобы я мог сохранять свою ориентацию внутри файла?
• Как сохранить общий обзор различных определений для одного и того же элемента, которые используются в разных блоках @media?

Любые советы для того, чтобы моя работа была менее грязной, приветствуется.

Answer 1

Лучшей практикой структурирования вашего CSS является структурирование вашего CSS. Под этим я имею в виду систему. Неважно, какая у вас система, если это имеет смысл для вас и вашей команды, и люди могут постоянно поддерживать ее (по крайней мере, в течение разумного промежутка времени).

Я могу вам сказать, в одну сторону не сделать это, хотя и это по не проектирование каждой страницы в отдельности со своим собственным CSS.

Я думаю, вы уже поняли это, но стоит повторить.

Теперь, когда я нарушил это правило. Но это редко, и это обычно на небольших сайтах, ориентированных на маркетинг, где у меня просто 4 разных страницы. В общем, однако, вы хотите повторно использовать столько своих CSS, сколько сможете на всех ваших страницах.

Один из способов достичь этого - начать с ранее существовавшей структуры, отработав рамки CSS. Обычным является Bootstrap, но есть буквально десятки и десятки вариантов.