От автора: написание правильного CSS часто является сложной задачей, но это то, что в определенный момент может потребоваться любому разработчику. Порядок свойств в CSS является постоянным вопросом, который беспокоит большинство из нас. Важно ли это? Получим ли мы что-то, если уделим этому внимание?
Ответ на эти вопросы неоднозначен. Поскольку я читаю все больше и больше на эту тему, я нашел много мнений по этому поводу. Некоторым это небезразлично, а другим — нет, поэтому трудно найти объективную точку зрения.
Самый простой способ — подойти к этой концепции с личной точки зрения. Я попытаюсь продемонстрировать это как с объективной, так и с субъективной точки зрения, и я надеюсь, это мне удастся.
Что это?
CSS это хаотический язык. Он дает разработчику большую свободу, но у этого есть своя цена. Чтобы управлять сложным проектом таблиц стилей, вам нужна методология, которой нужно следовать.
То, в каком порядке в CSS объявляются свойства, не имеет значения. Вы можете написать любое свойство в любом порядке, и ваша таблица стилей будет работать как обычно.
Основная проблема здесь — случайность. Можем ли мы контролировать последовательность и сделать ее лучше для нас? Стоит ли тратить время и силы на это? Будет ли наш код лучше, если мы всегда будем писать объявления в определенном порядке? Ну, ответ — и да, и нет.
Доступные методы
Существует бесконечное количество доступных методов для сокращения свойств, потому что мы все можем создавать собственные варианты, которые хорошо подходят для нашей команды или для нас. Помимо этого, есть три понятия.
Случайный порядок
Для тех, кто любит писать свои стили в случайном порядке. Не следовать правилам — это все равно правило. Эта концепция является той, которая обычно вызывает дискуссии.
.btn { color: #fff; background-color: blue; display: inline-block; padding: 0.5em 1em; font-size: 0.8rem; border-radius: 2px; font-weight: 700; overflow: hidden; border: none;
}Группируйте их логически
Логически мы можем сгруппировать стили разными способами. В основном распространенными вариантами являются макет, типографика, блочная модель, визуальные свойства и другие.
.btn { display: inline-block; overflow: hidden; padding: 0.5em 1em; color: #fff; background-color: blue; border: none; border-radius: 2px; font-size: 0.8rem; font-weight: 700;
}Алфавитный порядок
Использование алфавита упорядочивает ваши свойства — как вы уже догадались — на основе алфавита.
.btn { background-color: blue; border: none; border-radius: 2px; color: #fff; display: inline-block; font-size: 0.8rem; font-weight: 700; overflow: hidden; padding: 0.5em 1em;
}С объективной точки зрения
Объективно, контроль порядка действительно является проблемой. Мы хотим навести порядок в хаосе. Так что это хорошая идея.
Использование конвенции может облегчить нашу работу. Если мы сможем найти что-то быстрее и уменьшим вероятность ошибок, мы, как разработчик, будем в выигрыше.
Хотя это и объективный раздел, я должен отметить, что это личное предпочтение. Все люди разные, и то, что подходит для меня не является окончательным решением для всех.
Я почти уверен, что, если в руководстве по стилю вашей команды есть раздел для этого, это будет полезно. Следовать этим правилам проще, независимо от того, какой подход вы выбрали. В популярном фреймворке вы найдете некоторый набор правил, и это одна из причин, почему их пример и исходный код выглядят так аккуратно.
Группировка по алфавиту или логически может сделать наш код более согласованным.
С моей личной точки зрения
Мне нравится случайный порядок. У меня всегда в голове вопрос: должен ли я использовать какой-то метод для организации своего кода? Я пробовал как по алфавиту, так и по группам, но не придерживался ни того, ни другого.
В некоторых случаях мы все пишем упорядоченный CSS, думаем о сокращениях и тех свойствах, в которых мы устанавливаем значения для четырех направлений ( margin: top right bottom left;). Мы выучили направление по часовой стрелке, и в основном следуем этому, когда устанавливаем позицию следующим образом:
.btn { position: absolute; top: 0; right: auto; bottom: auto; left: 0;
}Здесь порядок не имеет значения, но я тоже следую ему. Для меня еще одним примером является свойство content. Если я использую его, то всегда добавляю в начало блока.
.btn::before { content: ''; ...
}Эта часть написания лучшего кода не так важна для меня. Я понимаю, почему это может быть полезно, но в современных условиях, я думаю, в большинстве случаев это не нужно.
При алфавитном порядке когнитивная нагрузка невелика, все сразу это понимают, и вы легко можете избежать ошибок дублирования.
В логических группах для меня код кажется естественным; для меня это более подходящий метод, и я думаю, что он также лучше всего подходит для CSS.
В обоих случаях у вас нет проблем с тем, куда писать код (вы не добавляете его просто в конец блока).
Я не думаю, что использование одного из этих методов поможет вам в поиске конкретной строки. В современных средах IDE смехотворно легко выделить или исследовать что-то. Для разработчика среднего уровня, который ежедневно просматривает код, это не проблема.
Если вы хотите получить более качественный и чистый код, лучшее решение — использовать правильно настроенный линтер; это поможет в проверке системы и в исправлении «ошибок» на основе руководства по стилю кодирования. Я думаю, что все методы в какой-то мере являются случайными.
Stylelint и CSSComb
Если вы хотите сделать более понятный CSS, начните с этого. Как я уже упоминал, чтобы сделать лучший код — с меньшим количеством ошибок — нам нужно использовать линтер. Используя их, мы можем легко установить стандарты кода.
Наиболее продвинутым и популярным на сегодняшний день является Stylelint, фантастический инструмент с отличными возможностями. Для получения дополнительной информации посетите их официальный сайт. В VS Code мы можем легко его настроить — как другие линтеры.
CSSComb — более старый инструмент, и это не линтер, а органайзер кода. Запустив его, вы можете проработать код на основе предопределенных правил. Мы также можем легко настроить его в VS Code.
Источник: https://pineco.de/
Редакция: Команда webformyself.