Question

I’m experimenting with CSS Transitions these days. I’m trying to build an animated web page with solely CSS.

Everything works just fine, but I came across an organisation-related issue: My CSS file look like a mess! If the client asks me to delay a specific animation or changing the order of another – It takes me few moments to find the right line to do that (few moments = too much).

May I separate animation-command from pure-design-css? How should I design browsers prefixes CSS (one line or several)? Changing animation speed must be as easy as a click (but now I need to type it 5 times).

I’d be glad to hear some ideas about CSS Trnasitions code organisation.
Thank you!

Answer 1

CSS files should be organized regardless of their content (transition rules etc.), this contributes both to browser’s parsing, and to the file’s readability in general. Note that:

• You should order your CSS according to the rules specification and the cascade (obviously), also aggregating duplicate rules wherever possible.
• It is highly recommended to add a table of contents, see example in this article on CSS files organization.
• You better order key-value pairs in a consistent manner (e.g. alphabetize them) as recommended at google’s ‘make the web faster’ article on payload.