Небольшой проект из одной страницы легко удержать в голове целиком, даже если все стили свалены в один файл без особой структуры. Но стоит проекту немного вырасти, и без какой-то системы организации CSS быстро превращается в файл, где страшно что-либо менять — вдруг что-то сломается в другом, не связанном на первый взгляд месте.
Один из самых распространённых подходов — делить файл на логические разделы: сначала сброс стилей и переменные, затем базовые правила для тегов, потом стили многократно используемых компонентов вроде кнопок и карточек, и в конце — стили конкретных страниц или разделов сайта.
Соглашение об именовании классов вроде БЭМ помогает избежать путаницы, когда два разных компонента случайно получают одинаковый класс с разным смыслом. Чёткая структура имени класса сразу подсказывает, к какому компоненту он относится и какую роль играет внутри него.
CSS-переменные, объявленные один раз в начале файла, избавляют от необходимости искать и заменять один и тот же цвет или отступ по всему проекту вручную, если дизайн решили немного скорректировать. Изменить значение переменной в одном месте — и оно подхватится везде, где переменная используется.
Разбиение на отдельные файлы по компонентам с последующей сборкой в один — ещё один шаг, который используют в более крупных проектах, хотя для небольшого сайта-визитки это часто избыточно и добавляет лишний инструмент туда, где вполне хватило бы одного аккуратно структурированного файла.
Про методологии организации CSS вроде БЭМ, OOCSS и атомарного подхода подробно рассказано на сайте методологии БЭМ, где разобраны и практические примеры именования.
Не менее важно и то, как называются сами файлы и папки в проекте — понятные имена вроде buttons.css или header.css экономят время при возвращении к проекту спустя месяцы, когда детали давно забылись и приходится заново разбираться в структуре с нуля.
