Организация кода CSS Transitions

Question

Я экспериментирую с CSS Transitions в эти дни. Я пытаюсь создать анимированную веб-страницу исключительно с использованием CSS.

Все работает отлично, но я столкнулся с проблемой, связанной с организацией: мой CSS-файл выглядит как беспорядок! Если клиент просит меня отложить определенную анимацию или изменить порядок другой - у меня уходит несколько минут, чтобы найти правильную линию для этого (несколько моментов = слишком много).

Могу ли я отделить анимационную команду от чистого-CSS-дизайна? Как мне разработать браузер с префиксами CSS (одной строкой или несколькими)? Изменение скорости анимации должно быть простым щелчком мыши (но теперь мне нужно набрать ее 5 раз).

Буду рад услышать некоторые идеи по организации кода CSS Trnasitions. Спасибо!

Answer 1

CSS-файлы должны быть организованы независимо от их содержимого (правил перехода и т. Д.), Это способствует как синтаксическому анализу браузера, так и читабельности файла в целом. Обратите внимание, что:

• Вы должны упорядочить свой CSS в соответствии со спецификацией правил и каскадом (очевидно), а также, где это возможно, агрегировать повторяющиеся правила.
• Настоятельно рекомендуется добавить оглавление, см. Пример в этой статье об организации файлов CSS .
• Вам лучше упорядочить пары ключ-значение согласованным образом (например, расположить их в алфавитном порядке), как рекомендовано в статье Google "Сделайте Интернет быстрее" о полезной нагрузке .