Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Transitions code organisation

CSS Transitions code organisation

Problem

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!

Problem courtesy of: SRachamim

Solution

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.
Solution courtesy of: Eliran Malka

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Transitions code organisation

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×