Sams Teach Yourself SVG in 24 Hours

Organizing Your Style Sheet

Organization of your style sheet is critical to both efficient coding and collaborative environments. Oftentimes, your SVG file will contain dozens (if not hundreds) of selectors. Because of this, it becomes very difficult to quickly scan over a list of selectors that do not clearly define what their style declarations accomplish or are not grouped according to accomplishment.

In collaborative development environments, where multiple developers and designers are working with the same SVG file (or a group thereof), having style sheets clearly labeled and organized can severely decrease the number of duplicate styles.

For instance, if you had a style sheet with ten rules that represented different fill colors, four classes ...