Metrics

All you need to know about the variety of metrics that Project Wallace generates about your CSS. Here is a top-level list of all sections that the CSS Analyzer provides:

  1. Stylesheet

    All metrics related to the stylesheet as a whole, like filesize, lines of code, etc.

    1. Total browserhacks
    2. Total unique browserhacks
    3. Average cohesion
    4. Lowest cohesion count
    5. Lowest cohesion declarations
    6. Lowest cohesion selectors
    7. Source Lines of Code
    8. Lines of code
    9. Simplicity
    10. Gzip filesize compression ratio
    11. Gzip filesize
    12. Uncompressed filesize

  2. Atrules

    CSS can contain a lot of at-rules. @keyframes and @media are some examples, but there are many more.

    1. Total `@charset` atrules
    2. Total unique @charset rules
    3. Unique `@charset` rules
    4. Total @document rules
    5. Total unique @document rules
    6. Unique `@document` rules
    7. Total `@font-face` atrules
    8. Total unique `@font-face` atrules
    9. Unique `@font-face` atrules
    10. Total @import atrules
    11. Total unique `@import` atrules
    12. Unique `@import` atrules
    13. Prefixed `@keyframes` ratio
    14. Total prefixed `@keyframes` atrules
    15. Total unique prefixed `@keyframes` atrules
    16. Unique prefixed `@keyframes` atrules
    17. Total `@keyframes` rules
    18. Total unique `@keyframes` rules
    19. Unique prefixed `@keyframes` atrules
    20. Total `@media` atrule browserhacks
    21. Total unique `@media` atrule browserhacks
    22. Unique `@media` atrule browserhacks
    23. Total `@media` atrules
    24. Total unique `@media` rules
    25. Unique prefixed `@media` atrules
    26. Total `@namespace` atrules
    27. Total unique `@namespace` rules
    28. Unique prefixed `@namespace` atrules
    29. Total `@page` atrules
    30. Total unique `@page` rules
    31. Unique prefixed `@page` atrules
    32. Total `@supports` atrules browserhacks
    33. Total unique `@supports` atrule browserhacks
    34. Unique `@supports` atrule browserhacks
    35. Total `@supports` atrules
    36. Total unique `@supports` rules
    37. Unique prefixed `@supports` atrules

  3. Rules

    A rule consists of one more selectors and a block of zero or more declarations.

    1. Total empty rules
    2. Average number of selectors per rule
    3. Maximum number of selectors per rule
    4. Selectors of rule(s) with highest number of selectors
    5. Minimum number of selectors per rule
    6. Selectors of rule(s) with lowest number of selectors
    7. Total rules

  4. Selectors

    A selector tells the browser which element(s) in the DOM to target.

    1. Total accessibility selectors
    2. Total unique accessibility selectors
    3. Unique accessibility selectors
    4. Total browserhack selectors
    5. Total unique browserhack selectors
    6. Unique browserhack selectors
    7. Average selector complexity
    8. Total selectors having maximum complexity
    9. Maximum complexity selectors
    10. Maximum selector complexity
    11. Total selector complexity
    12. Total unique selector complexities
    13. Unique selector complexities
    14. Total id selectors
    15. Total unique id selectors
    16. Unique id selectors
    17. Total js selectors
    18. Total unique js selectors
    19. Unique js selectors
    20. Total selectors having maximum specificity
    21. Maximum specificity selectors
    22. Maximum selector specificity
    23. Top specificity selectors
    24. Total selectors
    25. Total unique selectors
    26. Total universal selectors
    27. Total unique universal selectors
    28. Unique universal selectors

  5. Declarations

    A declaration has a property, a value and optionally an !important flag.

    1. Ratio of `!important` declarations
    2. Total `!important` declarations
    3. Total declarations
    4. Total unique declarations

  6. Properties

    A property tells the browser which styling feature to apply. Properties can also contain vendor prefixes or browser hacks.

    1. Total property browserhacks
    2. Total unique property browserhacks
    3. Unique property browserhacks
    4. Vendor prefixed properties
    5. Total vendor prefixed properties
    6. Total unique vendor prefixed properties
    7. Unique vendor prefixed properties
    8. Total properties
    9. Total unique properties
    10. Unique properties

  7. Values

    A value tells the browser how the browser should style the given styling feature. Project Wallace primarily focuses on branding-related values, like colors, fonts, shadows and animations.

    1. Total animation durations
    2. Total unique animation durations
    3. Unique animation durations
    4. Total animation timing functions
    5. Total unique animation timing functions
    6. Unique animation timing functions
    7. Total box-shadows
    8. Total unique box-shadows
    9. Unique box-shadows
    10. Total value browserhacks
    11. Total unique value browserhacks
    12. Unique value browserhacks
    13. Total color duplicates
    14. Total unique color duplicates
    15. Unique color duplicates
    16. Total colors
    17. Total unique colors
    18. Unique colors
    19. Total font-families
    20. Total unique font-families
    21. Unique font-families
    22. Total font-sizes
    23. Total unique font-sizes
    24. Unique font-sizes
    25. Vendor prefixed values ratio
    26. Total vendor prefixed values
    27. Total unique value vendor prefixes
    28. Unique prefixed values
    29. Total text-shadows
    30. Total unique text-shadows
    31. Unique text-shadows
    32. Total values
    33. Total z-indexes
    34. Total unique z-indexes
    35. Unique z-indexes