{{> header}}
{{#content}} {{#.}}

{{name}}

{{size.view.raw}} / {{size.view.zipped}}

Total Declarations

    {{#totalsDeclarations}}
  • {{name}}

    {{count}}

    • {{/totalsDeclarations}}

Size

{{#sizes}}

Files size

{{{sizes}}}
{{/sizes}} {{#dataUri}}

Data URIs Data uri not the best approach to serve data (especially in HTTP2). It blows CSS, make images render blocking resource and it comes with less decoding speed and cache invalidation issues. Consider to avoid this practice.

  • {{total.count}}

    Files

  • {{total.fmt}}

    Total
    {{#data}}
  • {{^displayValue}}Aa{{/displayValue}}
    {{typeRaw}}
    {{size}}
    • {{/data}}
{{/dataUri}}

Selectors and rules

{{#selectors}}

Selectors used

    {{#stat}}

  • {{count}}

    {{name}}
    • {{/stat}}
{{/selectors}}

Specificity Graph This is zones that could be hard to overwrite and work with. Zones that could escalate specificity and not scaled well during project lifetime.

{{{specificityChart.chart}}}

{{specificityTops.length}} {{#pluralize}}{{specificityTops.length}},Heavy selector,Heavy selectors{{/pluralize}} This selectors should be simplified

{{#specificityTops.length}}
{{#specificityTops}} {{/specificityTops}}
Specifisity  
{{specificity}} {{selector}}
{{/specificityTops.length}}

{{selectorsListTops.length}} {{#pluralize}}{{selectorsListTops.length}},Long selectors list,Long selectors lists{{/pluralize}} This selectors is potential candidates for simple CSS class

{{#selectorsListTops.length}}
{{#selectorsListTops}} {{/selectorsListTops}}
Selectors  
{{selectors}} {{{selector}}}
{{/selectorsListTops.length}}

Ruleset Size This graph show you places with selectors that have 15 or more rules inside

Number of declarations per ruleset

{{{rulesizeChart.chart}}}

{{rulesizeTops.heavy.length}} {{#pluralize}}{{rulesizeTops.heavy.length}},Heavy ruleset,Heavy rulesets{{/pluralize}} This classes potentially could be changed to single class

{{#rulesizeTops.heavy.length}}
{{#rulesizeTops.heavy}} {{/rulesizeTops.heavy}}
Declarations  
{{declarations}} {{selector}}
{{/rulesizeTops.heavy.length}}

{{rulesizeTops.empty.length}} {{#pluralize}}{{rulesizeTops.empty.length}},Empty ruleset,Empty rulesets{{/pluralize}} This selectors should be removed from project

{{#rulesizeTops.empty.length}}
{{#rulesizeTops.empty}} {{/rulesizeTops.empty}}
Declarations  
{{declarations}} {{selector}}
{{/rulesizeTops.empty.length}}
{{#selectors}}

{{jsPrefixedSelectors.length}} js- prefixed selectors This selectors should not be used for styling, since it SoC violation

    {{#jsPrefixedSelectors}}
  • {{.}}
    • {{/jsPrefixedSelectors}}

{{universalSelectors.length}} Universal selectors Universal selectors could affect performance and encapsulation of components

    {{#universalSelectors}}
  • {{.}}
    • {{/universalSelectors}}

{{idSelectors.length}} Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

    {{#idSelectors}}
  • {{.}}
    • {{/idSelectors}}
{{/selectors}}

{{importantRules.count}} Important rules Important rules could dramatically decrease project maintainability and scalability

    {{#importantRules.rules}}
  • {{property}}: {{value}}
    • {{/importantRules.rules}}

Consistency

{{#uniquesChart.total}}

Total vs. Unique Declarations This graph could show how effective code organized and reused over styling properties

{{uniquesChart.total}} total, {{uniquesChart.unique}} unique declarations. Reusability index: {{uniquesChart.reusability}}%.

{{{uniquesChart.color.chart}}}
Color
{{uniquesChart.color.reusability}}% reusability index
{{{uniquesChart.backgroundColor.chart}}}
Background Color
{{uniquesChart.backgroundColor.reusability}}% reusability index
{{{uniquesChart.fontSize.chart}}}
Font Size
{{uniquesChart.fontSize.reusability}}% reusability index
{{{uniquesChart.fontFamily.chart}}}
Font Family
{{uniquesChart.fontFamily.reusability}}% reusability index
{{{uniquesChart.borderRadius.chart}}}
Border radius
{{uniquesChart.borderRadius.reusability}}% reusability index
{{{uniquesChart.zIndex.chart}}}
Z-index
{{uniquesChart.zIndex.reusability}}% reusability index
{{/uniquesChart.total}}

{{uniques.color.length}} {{#pluralize}}{{uniques.color.length}},Unique Color,Unique Colors{{/pluralize}}

{{#uniques.color.length}}
    {{#uniques.color}}

  • Aa

    {{.}}
    • {{/uniques.color}}
{{/uniques.color.length}}

{{uniques.backgroundColor.length}} {{#pluralize}}{{uniques.backgroundColor.length}},Unique Background Color,Unique Background Colors{{/pluralize}}

{{#uniques.backgroundColor.length}}
    {{#uniques.backgroundColor}}
  • {{.}}
    • {{/uniques.backgroundColor}}
{{/uniques.backgroundColor.length}}

{{uniques.fontSize.length}} {{#pluralize}}{{uniques.fontSize.length}},Unique Font Size,Unique Font Sizes{{/pluralize}}

{{#uniques.fontSize.length}}
    {{#uniques.fontSizeSorted}}

  • Abc

    {{orig}}

    • {{/uniques.fontSizeSorted}}
{{/uniques.fontSize.length}}

{{uniques.fontFamily.length}} {{#pluralize}}{{uniques.fontFamily.length}},Unique Font Family,Unique Font Families{{/pluralize}}

{{#uniques.fontFamily.length}}
    {{#uniques.fontFamily}}

  1. Aa

    {{.}}
    2. {{/uniques.fontFamily}}
{{/uniques.fontFamily.length}}

{{uniques.borderRadius.length}} {{#pluralize}}{{uniques.borderRadius.length}},Unique Border Radius,Unique Border Radii{{/pluralize}}

    {{#uniques.borderRadius}}
  • {{.}}
    • {{/uniques.borderRadius}}

{{uniques.zIndex.length}} {{#pluralize}}{{uniques.zIndex.length}},Unique Z Index,Unique Z Indices{{/pluralize}}

    {{#uniques.zIndexSorted}}
  • {{.}}
    • {{/uniques.zIndexSorted}}
{{#uniquesChart.total}}

Total vs. Unique Space/Metric Declarations This graph could show how effective code organized and reused over space and metric properties

{{uniquesChart.total}} total, {{uniquesChart.unique}} unique declarations. Reusability index: {{uniquesChart.reusability}}%.

{{{uniquesChart.margin.chart}}}
{{#pluralize}}{{uniquesChart.margin.total}},Margin,Margins{{/pluralize}}
{{uniquesChart.margin.reusability}}% reusability index
{{#uniques.margin.length}}
    {{#uniques.margin}}

  • {{orig}}

    • {{/uniques.margin}}
{{/uniques.margin.length}}
{{{uniquesChart.padding.chart}}}
{{#pluralize}}{{uniquesChart.padding.total}},Padding,Paddings{{/pluralize}}
{{uniquesChart.padding.reusability}}% reusability index
{{#uniques.padding.length}}
    {{#uniques.padding}}

  • {{orig}}

    • {{/uniques.padding}}
{{/uniques.padding.length}}
{{{uniquesChart.lineHeight.chart}}}
{{#pluralize}}{{uniquesChart.lineHeight.total}},Line Height,Line Heights{{/pluralize}}
{{uniquesChart.lineHeight.reusability}}% reusability index
{{#uniques.lineHeight.length}}
    {{#uniques.lineHeight}}
  • {{.}}
    • {{/uniques.lineHeight}}
{{/uniques.lineHeight.length}}
{{{uniquesChart.width.chart}}}
{{#pluralize}}{{uniquesChart.width.total}},Width,Widths{{/pluralize}}
{{uniquesChart.width.reusability}}% reusability index
{{#uniques.width.length}}
    {{#uniques.width}}
  • {{.}}
    • {{/uniques.width}}
{{/uniques.width.length}}
{{{uniquesChart.height.chart}}}
{{#pluralize}}{{uniquesChart.height.total}},Height,Heights{{/pluralize}}
{{uniquesChart.height.reusability}}% reusability index
{{#uniques.height.length}}
    {{#uniques.height}}
  • {{.}}
    • {{/uniques.height}}
{{/uniques.height.length}}
{{/uniquesChart.total}}

{{uniques.mediaQueries.length}} {{#pluralize}}{{uniques.mediaQueries.length}},Media Query,Media Queries{{/pluralize}} Consistency of media queries utilization on the project

    {{#uniques.mediaQueries}}
  • {{.}}
    • {{/uniques.mediaQueries}}
{{/.}} {{/content}}
{{> footer}}