atlas-guide

49KB / 9KB

  • 553

    Selectors

  • 467

    Rules

  • 1,609

    Declarations

  • 112

    Properties

Total Declarations

  • width

    72

  • height

    31

  • position

    86

  • float

    3

  • margin

    50

  • padding

    48

  • color

    109

  • background color

    41

  • font size

    95

Size

Files size

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.

  • 2

    Files

  • 900B

    Total
  • image/svg+xml
    451B
  • image/svg+xml
    449B

Selectors and rules

Selectors used

  • 538

    Class

  • 76

    Type

  • 43

    Pseudo element

  • 35

    Pseudo class

  • 26

    js- prefixed

  • 13

    Attribute

  • 1

    Universal

  • 0

    Id

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.

14 Heavy selectors This selectors should be simplified

Specifisity  
60 .atlas-nav>.atlas-nav__item .atlas-nav__item .atlas-nav__item .atlas-nav__item>.atlas-nav__ln
50 .atlas-nav>.atlas-nav__item .atlas-nav__item .atlas-nav__item>.atlas-nav__ln
50 .atlas-nav .atlas-nav__ln._category.js-collapsed+.atlas-nav__sub-nav
41 .atlas-nav .atlas-nav__ln._category.js-collapsed svg
40 .atlas-nav>.atlas-nav__item .atlas-nav__item>.atlas-nav__ln
40 .js-found .atlas-nav__ln.js-relevant:hover
40 .js-found .atlas-nav__ln.js-relevant:focus
40 .js-found .atlas-nav__ln.js-relevant:active
40 .atlas-stat-digit._uri .atlas-stat-digit__data._display
40 .atlas-playground .language-css .token.string
40 .atlas-playground .style .token.string
40 .atlas-code .language-css .token.string
40 .atlas-code .style .token.string
40 .atlas-anchor:target+.atlas-title .atlas-title__highlight

11 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors  
7 .atlas-code .token.property,
.atlas-code .token.tag,
.atlas-code .token.boolean,
.atlas-code .token.number,
.atlas-code .token.constant,
.atlas-code .token.symbol,
.atlas-code .token.deleted
6 .atlas-playground .token.selector,
.atlas-playground .token.attr-name,
.atlas-playground .token.string,
.atlas-playground .token.char,
.atlas-playground .token.builtin,
.atlas-playground .token.inserted
6 .atlas-playground .token.operator,
.atlas-playground .token.entity,
.atlas-playground .token.url,
.atlas-playground .language-css .token.string,
.atlas-playground .style .token.string,
.atlas-playground .token.variable
6 .atlas-code .token.selector,
.atlas-code .token.attr-name,
.atlas-code .token.string,
.atlas-code .token.char,
.atlas-code .token.builtin,
.atlas-code .token.inserted
6 h1,
h2,
h3,
h4,
h5,
h6
6 .atlas-title_1,
.atlas-title_2,
.atlas-title_3,
.atlas-title_4,
.atlas-title_5,
.atlas-title_6
5 .atlas-playground .token.property,
.atlas-playground .token.tag,
.atlas-playground .token.constant,
.atlas-playground .token.symbol,
.atlas-playground .token.deleted
5 .atlas-code .token.operator,
.atlas-code .token.entity,
.atlas-code .token.url,
.atlas-code .language-css .token.string,
.atlas-code .style .token.string
5 .atlas-title__text,
.atlas-p,
.atlas-ul,
.atlas-ol,
.atlas-code
4 .atlas-playground .token.comment,
.atlas-playground .token.prolog,
.atlas-playground .token.doctype,
.atlas-playground .token.cdata
4 .atlas-code .token.comment,
.atlas-code .token.prolog,
.atlas-code .token.doctype,
.atlas-code .token.cdata

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

Number of declarations per ruleset

6 Heavy rulesets This classes potentially could be changed to single class

Declarations  
21 .atlas-toc
20 .atlas-playground__notifier
18 .atlas-stat-header
18 .atlas-copier__message
17 .atlas-nav__ln
17 .atlas-playground__summary

0 Empty rulesets This selectors should be removed from project

26 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

  • .l-atlas-container.js-aside-panel-hidden .l-atlas-container__aside

  • .l-atlas-container.js-aside-panel-hidden .l-atlas-container__main

  • .js-found .atlas-search__icon

  • .js-found .atlas-search__clear

  • .js-aside-panel-hidden .atlas-aside-ctrl

  • .atlas-aside-resizer-overlay.js-dragging

  • .js-aside-panel-hidden .atlas-aside__header

  • .js-aside-panel-hidden .atlas-aside__footer

  • .js-aside-panel-hidden .atlas-aside__content

  • .atlas-nav__ln.js-current-page

  • .atlas-nav .atlas-nav__ln._category.js-collapsed svg

  • .atlas-nav .atlas-nav__ln._category.js-collapsed+.atlas-nav__sub-nav

  • .js-searching .atlas-nav__ln

  • .js-found .atlas-nav__ln

  • .js-found .atlas-nav__ln.js-relevant

  • .js-found .atlas-nav__ln.js-relevant:hover

  • .js-found .atlas-nav__ln.js-relevant:focus

  • .js-found .atlas-nav__ln.js-relevant:active

  • .js-found .atlas-nav__sub-nav

  • .js-found .atlas-nav__ln._category

  • .js-loading-frame .atlas-loader

  • .atlas-stat-page .js-bar-chart

  • .atlas-stat-page .js-line-chart

  • .atlas-playground__notifier.js-show

  • .atlas-playground.js-opened .atlas-playground__example

  • .atlas-playground.js-opened .atlas-playground__example *

1 Universal selectors Universal selectors could affect performance and encapsulation of components

  • .atlas-playground.js-opened .atlas-playground__example *

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

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

1609 total, 587 unique declarations. Reusability index: 63%.

Color
70% reusability index
Background Color
43% reusability index
Font Size
72% reusability index
Font Family
95% reusability index
Border radius
56% reusability index
Z-index
76% reusability index

32 Unique Colors

  • Aa

    transparent

  • Aa

    inherit

  • Aa

    rgba(0,0,0,0.3)

  • Aa

    #fff

  • Aa

    whitesmoke

  • Aa

    #f8f8f2

  • Aa

    #ccc

  • Aa

    #abd2ed

  • Aa

    #a6c6ed

  • Aa

    #ae81ff

  • Aa

    #bfbfbf

  • Aa

    #e6db74

  • Aa

    #66d9ef

  • Aa

    #999

  • Aa

    #a3d65c

  • Aa

    #f73b3b

  • Aa

    #f7b23b

  • Aa

    #dd4a68

  • Aa

    #f92672

  • Aa

    #fd971f

  • Aa

    #3281e2

  • Aa

    deeppink

  • Aa

    #a6e22e

  • Aa

    slategray

  • Aa

    #a67f59

  • Aa

    #e90

  • Aa

    #195cae

  • Aa

    #595959

  • Aa

    #07a

  • Aa

    #905

  • Aa

    #690

  • Aa

    black

23 Unique Background Colors

  • transparent
  • rgba(171,210,237,0.125)
  • rgba(166,198,237,0.15)
  • rgba(0,0,0,0.3)
  • rgba(0,0,0,0.5)
  • #fff
  • #fcfcfc
  • #f2f2f2
  • #e6effa
  • #e0e0e0
  • #ccc
  • #a6c6ed
  • #98a3ed
  • #e56daa
  • #6d7ce5
  • #51adf6
  • #f7b23b
  • #3281e2
  • #2196f3
  • #0c7cd5
  • #595959
  • #38382d
  • #2a2a22

26 Unique Font Sizes

  • Abc

    5rem

  • Abc

    4rem

  • Abc

    3rem

  • Abc

    2.441rem

  • Abc

    2.2rem

  • Abc

    2rem

  • Abc

    1.563rem

  • Abc

    1.25rem

  • Abc

    1.2rem

  • Abc

    1rem

  • Abc

    inherit

  • Abc

    .9375rem

  • Abc

    0.9rem

  • Abc

    .875rem

  • Abc

    0.85em

  • Abc

    .8125rem

  • Abc

    0.8em

  • Abc

    0.8rem

  • Abc

    12.75px

  • Abc

    .75rem

  • Abc

    0.7rem

  • Abc

    .6875rem

  • Abc

    11px

  • Abc

    .625rem

  • Abc

    0.6rem

  • Abc

    8px

3 Unique Font Families

  1. Aa

    "Arial","FreeSans",sans-serif

  2. Aa

    "DejaVu Sans Mono","SFMono-Regular","Menlo","Consolas","Lucida Console",monospace

  3. Aa

    inherit

7 Unique Border Radii

  • .3125rem

  • 50%

  • 5px

  • 3px

  • 4px

  • 100%

  • 0

6 Unique Z Indices

  • 0

  • 1

  • 2

  • 5

  • 10

  • 11

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

1609 total, 587 unique declarations. Reusability index: 63%.

Margins
50% reusability index

  • 4rem

  • 3.75rem

  • 2.5rem

  • 1.25rem

  • .625rem

  • .3125rem

  • 3px

  • 2px

  • 1px

  • 0

  • auto

  • -.625rem

  • -1.25rem

Paddings
60% reusability index

  • 1.25rem

  • .8125rem

  • .625rem

  • .3125rem

  • 0.3em

  • .25rem

  • 3px

  • .125rem

  • 2px

  • 0.1em

  • 1px

  • 0

Line Heights
62% reusability index

  • 1.5625rem

  • .875rem

  • 1.2

  • 1.25rem

  • 1

  • 2.75rem

  • 2.5rem

  • 1.5

  • 3.75rem

  • 25px

  • 20px

  • 1.6

  • .75rem

  • 1.4

  • 10px

Widths
62% reusability index

  • 15.625rem

  • 5px

  • 100%

  • 1rem

  • .875rem

  • 10px

  • 1.125rem

  • .5rem

  • .9375rem

  • 50px

  • 50%

  • 10%

  • 25%

  • 33.3333333333%

  • 100px

  • 80%

  • 0

  • 90px

  • 16.6666666667%

  • 200px

  • .625rem

  • 1.5rem

  • 250px

  • 18px

  • .75rem

  • .6875rem

  • .1875rem

Heights
35% reusability index

  • 100%

  • 1.5625rem

  • 1rem

  • .875rem

  • 20px

  • 1.875rem

  • 1.25rem

  • 1.125rem

  • 1px

  • 10px

  • 0

  • .625rem

  • 5px

  • 100px

  • 1.5rem

  • 90vh

  • 8px

  • .75rem

  • .1875rem

  • .9375rem

0 Media Queries Consistency of media queries utilization on the project

dev_atlas-frame.css

6KB / 2KB

  • 70

    Selectors

  • 63

    Rules

  • 234

    Declarations

  • 62

    Properties

Total Declarations

  • width

    10

  • height

    10

  • position

    17

  • float

    0

  • margin

    2

  • padding

    6

  • color

    17

  • background color

    3

  • font size

    4

Size

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.

  • 0

    Files

  • 0B

    Total

Selectors and rules

Selectors used

  • 70

    Class

  • 21

    js- prefixed

  • 12

    Pseudo class

  • 8

    Type

  • 4

    Pseudo element

  • 0

    Id

  • 0

    Attribute

  • 0

    Universal

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.

8 Heavy selectors This selectors should be simplified

Specifisity  
60 .atlas-nav>.atlas-nav__item .atlas-nav__item .atlas-nav__item .atlas-nav__item>.atlas-nav__ln
50 .atlas-nav>.atlas-nav__item .atlas-nav__item .atlas-nav__item>.atlas-nav__ln
50 .atlas-nav .atlas-nav__ln._category.js-collapsed+.atlas-nav__sub-nav
41 .atlas-nav .atlas-nav__ln._category.js-collapsed svg
40 .atlas-nav>.atlas-nav__item .atlas-nav__item>.atlas-nav__ln
40 .js-found .atlas-nav__ln.js-relevant:hover
40 .js-found .atlas-nav__ln.js-relevant:focus
40 .js-found .atlas-nav__ln.js-relevant:active

0 Long selectors lists This selectors is potential candidates for simple CSS class

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

Number of declarations per ruleset

1 Heavy ruleset This classes potentially could be changed to single class

Declarations  
17 .atlas-nav__ln

0 Empty rulesets This selectors should be removed from project

21 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

  • .l-atlas-container.js-aside-panel-hidden .l-atlas-container__aside

  • .l-atlas-container.js-aside-panel-hidden .l-atlas-container__main

  • .js-found .atlas-search__icon

  • .js-found .atlas-search__clear

  • .js-aside-panel-hidden .atlas-aside-ctrl

  • .atlas-aside-resizer-overlay.js-dragging

  • .js-aside-panel-hidden .atlas-aside__header

  • .js-aside-panel-hidden .atlas-aside__footer

  • .js-aside-panel-hidden .atlas-aside__content

  • .atlas-nav__ln.js-current-page

  • .atlas-nav .atlas-nav__ln._category.js-collapsed svg

  • .atlas-nav .atlas-nav__ln._category.js-collapsed+.atlas-nav__sub-nav

  • .js-searching .atlas-nav__ln

  • .js-found .atlas-nav__ln

  • .js-found .atlas-nav__ln.js-relevant

  • .js-found .atlas-nav__ln.js-relevant:hover

  • .js-found .atlas-nav__ln.js-relevant:focus

  • .js-found .atlas-nav__ln.js-relevant:active

  • .js-found .atlas-nav__sub-nav

  • .js-found .atlas-nav__ln._category

  • .js-loading-frame .atlas-loader

0 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

1 Important rules Important rules could dramatically decrease project maintainability and scalability

  • display: block

Consistency

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

234 total, 142 unique declarations. Reusability index: 39%.

Color
58% reusability index
Background Color
0% reusability index
Font Size
50% reusability index
Font Family
75% reusability index
Border radius
0% reusability index
Z-index
62% reusability index

7 Unique Colors

  • Aa

    transparent

  • Aa

    inherit

  • Aa

    #fff

  • Aa

    #bfbfbf

  • Aa

    #3281e2

  • Aa

    #595959

  • Aa

    black

3 Unique Background Colors

  • #fff
  • #f2f2f2
  • #e0e0e0

2 Unique Font Sizes

  • Abc

    .8125rem

  • Abc

    .625rem

1 Unique Font Family

  1. Aa

    "Arial","FreeSans",sans-serif

3 Unique Border Radii

  • .3125rem

  • 50%

  • 5px

3 Unique Z Indices

  • 1

  • 2

  • 11

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

234 total, 142 unique declarations. Reusability index: 39%.

Margins
0% reusability index

  • 0

  • auto

Paddings
16% reusability index

  • 1.25rem

  • .625rem

  • .25rem

  • .125rem

  • 0

Line Heights
40% reusability index

  • 1.5625rem

  • .875rem

  • 1.2

Widths
10% reusability index

  • 15.625rem

  • 5px

  • 100%

  • 1rem

  • .875rem

  • 10px

  • 1.125rem

  • .5rem

  • .9375rem

Heights
10% reusability index

  • 100%

  • 1.5625rem

  • 1rem

  • .875rem

  • 20px

  • 1.875rem

  • 1.25rem

  • 1.125rem

  • 1px

0 Media Queries Consistency of media queries utilization on the project

dev_atlas-insights.css

13KB / 3KB

  • 128

    Selectors

  • 124

    Rules

  • 449

    Declarations

  • 74

    Properties

Total Declarations

  • width

    24

  • height

    5

  • position

    14

  • float

    0

  • margin

    19

  • padding

    15

  • color

    20

  • background color

    3

  • font size

    37

Size

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.

  • 0

    Files

  • 0B

    Total

Selectors and rules

Selectors used

  • 128

    Class

  • 20

    Type

  • 4

    Pseudo element

  • 2

    Pseudo class

  • 2

    js- prefixed

  • 0

    Id

  • 0

    Attribute

  • 0

    Universal

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.

1 Heavy selector This selectors should be simplified

Specifisity  
40 .atlas-stat-digit._uri .atlas-stat-digit__data._display

0 Long selectors lists This selectors is potential candidates for simple CSS class

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

Number of declarations per ruleset

1 Heavy ruleset This classes potentially could be changed to single class

Declarations  
18 .atlas-stat-header

0 Empty rulesets This selectors should be removed from project

2 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

  • .atlas-stat-page .js-bar-chart

  • .atlas-stat-page .js-line-chart

0 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

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

449 total, 221 unique declarations. Reusability index: 50%.

Color
85% reusability index
Background Color
0% reusability index
Font Size
59% reusability index
Font Family
92% reusability index
Border radius
0% reusability index
Z-index
25% reusability index

3 Unique Colors

  • Aa

    #999

  • Aa

    #3281e2

  • Aa

    #595959

3 Unique Background Colors

  • rgba(166,198,237,0.15)
  • #ccc
  • #a6c6ed

15 Unique Font Sizes

  • Abc

    5rem

  • Abc

    4rem

  • Abc

    2.441rem

  • Abc

    2rem

  • Abc

    1.563rem

  • Abc

    1.25rem

  • Abc

    1.2rem

  • Abc

    1rem

  • Abc

    .9375rem

  • Abc

    0.9rem

  • Abc

    0.8rem

  • Abc

    0.7rem

  • Abc

    .6875rem

  • Abc

    0.6rem

  • Abc

    8px

2 Unique Font Families

  1. Aa

    "DejaVu Sans Mono","SFMono-Regular","Menlo","Consolas","Lucida Console",monospace

  2. Aa

    "Arial","FreeSans",sans-serif

2 Unique Border Radii

  • 3px

  • 4px

3 Unique Z Indices

  • 1

  • 5

  • 10

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

449 total, 221 unique declarations. Reusability index: 50%.

Margins
21% reusability index

  • 4rem

  • 3.75rem

  • 2.5rem

  • 1.25rem

  • .625rem

  • 3px

  • 2px

  • 0

  • -1.25rem

Paddings
40% reusability index

  • 1.25rem

  • .8125rem

  • .625rem

  • 0.3em

  • 3px

  • 0

Line Heights
70% reusability index

  • 1.25rem

  • 1.2

  • 1

Widths
54% reusability index

  • 50px

  • 50%

  • 10px

  • 100%

  • 10%

  • 25%

  • 33.3333333333%

  • 100px

  • 80%

  • 0

  • 90px

Heights
20% reusability index

  • 20px

  • 10px

  • 100%

  • 0

0 Media Queries Consistency of media queries utilization on the project

dev_atlas-prism.css

2KB / 567B

  • 67

    Selectors

  • 23

    Rules

  • 24

    Declarations

  • 6

    Properties

Total Declarations

  • width

    0

  • height

    0

  • position

    0

  • float

    0

  • margin

    0

  • padding

    0

  • color

    18

  • background color

    0

  • font size

    0

Size

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.

  • 0

    Files

  • 0B

    Total

Selectors and rules

Selectors used

  • 67

    Class

  • 1

    Type

  • 1

    Attribute

  • 0

    Id

  • 0

    Pseudo class

  • 0

    Pseudo element

  • 0

    Universal

  • 0

    js- prefixed

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.

4 Heavy selectors This selectors should be simplified

Specifisity  
40 .atlas-playground .language-css .token.string
40 .atlas-playground .style .token.string
40 .atlas-code .language-css .token.string
40 .atlas-code .style .token.string

8 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors  
7 .atlas-code .token.property,
.atlas-code .token.tag,
.atlas-code .token.boolean,
.atlas-code .token.number,
.atlas-code .token.constant,
.atlas-code .token.symbol,
.atlas-code .token.deleted
6 .atlas-playground .token.selector,
.atlas-playground .token.attr-name,
.atlas-playground .token.string,
.atlas-playground .token.char,
.atlas-playground .token.builtin,
.atlas-playground .token.inserted
6 .atlas-playground .token.operator,
.atlas-playground .token.entity,
.atlas-playground .token.url,
.atlas-playground .language-css .token.string,
.atlas-playground .style .token.string,
.atlas-playground .token.variable
6 .atlas-code .token.selector,
.atlas-code .token.attr-name,
.atlas-code .token.string,
.atlas-code .token.char,
.atlas-code .token.builtin,
.atlas-code .token.inserted
5 .atlas-playground .token.property,
.atlas-playground .token.tag,
.atlas-playground .token.constant,
.atlas-playground .token.symbol,
.atlas-playground .token.deleted
5 .atlas-code .token.operator,
.atlas-code .token.entity,
.atlas-code .token.url,
.atlas-code .language-css .token.string,
.atlas-code .style .token.string
4 .atlas-playground .token.comment,
.atlas-playground .token.prolog,
.atlas-playground .token.doctype,
.atlas-playground .token.cdata
4 .atlas-code .token.comment,
.atlas-code .token.prolog,
.atlas-code .token.doctype,
.atlas-code .token.cdata

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

Number of declarations per ruleset

0 Heavy rulesets This classes potentially could be changed to single class

0 Empty rulesets This selectors should be removed from project

0 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

0 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

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

24 total, 20 unique declarations. Reusability index: 16%.

Color
16% reusability index
Background Color
0% reusability index
Font Size
0% reusability index
Font Family
0% reusability index
Border radius
0% reusability index
Z-index
0% reusability index

15 Unique Colors

  • Aa

    #f8f8f2

  • Aa

    #ae81ff

  • Aa

    #e6db74

  • Aa

    #66d9ef

  • Aa

    #999

  • Aa

    #dd4a68

  • Aa

    #f92672

  • Aa

    #fd971f

  • Aa

    #a6e22e

  • Aa

    slategray

  • Aa

    #a67f59

  • Aa

    #e90

  • Aa

    #07a

  • Aa

    #905

  • Aa

    #690

0 Unique Background Colors

0 Unique Font Sizes

0 Unique Font Families

0 Unique Border Radii

0 Unique Z Indices

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

24 total, 20 unique declarations. Reusability index: 16%.

Margins
0% reusability index
Paddings
0% reusability index
Line Heights
0% reusability index
Widths
0% reusability index
Heights
0% reusability index

0 Media Queries Consistency of media queries utilization on the project

dev_atlas-style.css

7KB / 2KB

  • 63

    Selectors

  • 63

    Rules

  • 205

    Declarations

  • 52

    Properties

Total Declarations

  • width

    14

  • height

    5

  • position

    13

  • float

    0

  • margin

    4

  • padding

    1

  • color

    4

  • background color

    5

  • font size

    14

Size

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.

  • 0

    Files

  • 0B

    Total

Selectors and rules

Selectors used

  • 61

    Class

  • 8

    Type

  • 7

    Pseudo element

  • 1

    Pseudo class

  • 0

    Id

  • 0

    Attribute

  • 0

    Universal

  • 0

    js- prefixed

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.

0 Heavy selectors This selectors should be simplified

0 Long selectors lists This selectors is potential candidates for simple CSS class

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

Number of declarations per ruleset

0 Heavy rulesets This classes potentially could be changed to single class

0 Empty rulesets This selectors should be removed from project

0 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

0 Universal selectors Universal selectors could affect performance and encapsulation of components

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

2 Important rules Important rules could dramatically decrease project maintainability and scalability

  • animation-play-state: paused

  • animation-play-state: initial

Consistency

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

205 total, 116 unique declarations. Reusability index: 43%.

Color
0% reusability index
Background Color
20% reusability index
Font Size
57% reusability index
Font Family
85% reusability index
Border radius
0% reusability index
Z-index
0% reusability index

4 Unique Colors

  • Aa

    #a6c6ed

  • Aa

    #3281e2

  • Aa

    deeppink

  • Aa

    #595959

4 Unique Background Colors

  • #fff
  • #e6effa
  • #a6c6ed
  • #3281e2

6 Unique Font Sizes

  • Abc

    4rem

  • Abc

    2.2rem

  • Abc

    2rem

  • Abc

    1.563rem

  • Abc

    .6875rem

  • Abc

    11px

2 Unique Font Families

  1. Aa

    "Arial","FreeSans",sans-serif

  2. Aa

    "DejaVu Sans Mono","SFMono-Regular","Menlo","Consolas","Lucida Console",monospace

1 Unique Border Radius

  • 100%

0 Unique Z Indices

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

205 total, 116 unique declarations. Reusability index: 43%.

Margins
0% reusability index

  • 3.75rem

  • 2.5rem

  • 1.25rem

  • 1px

  • 0

Padding
0% reusability index

  • 0

Line Heights
0% reusability index

  • 1.2

  • 1

  • 1.25rem

Widths
50% reusability index

  • 16.6666666667%

  • 33.3333333333%

  • 100%

  • 200px

  • .625rem

  • 0

  • 100px

Heights
0% reusability index

  • 100%

  • 1.25rem

  • .625rem

  • 5px

  • 100px

0 Media Queries Consistency of media queries utilization on the project

dev_atlas.css

21KB / 4KB

  • 225

    Selectors

  • 194

    Rules

  • 697

    Declarations

  • 93

    Properties

Total Declarations

  • width

    24

  • height

    11

  • position

    42

  • float

    3

  • margin

    25

  • padding

    26

  • color

    50

  • background color

    30

  • font size

    40

Size

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.

  • 2

    Files

  • 900B

    Total
  • image/svg+xml
    451B
  • image/svg+xml
    449B

Selectors and rules

Selectors used

  • 212

    Class

  • 39

    Type

  • 28

    Pseudo element

  • 20

    Pseudo class

  • 12

    Attribute

  • 3

    js- prefixed

  • 1

    Universal

  • 0

    Id

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.

1 Heavy selector This selectors should be simplified

Specifisity  
40 .atlas-anchor:target+.atlas-title .atlas-title__highlight

3 Long selectors lists This selectors is potential candidates for simple CSS class

Selectors  
6 h1,
h2,
h3,
h4,
h5,
h6
6 .atlas-title_1,
.atlas-title_2,
.atlas-title_3,
.atlas-title_4,
.atlas-title_5,
.atlas-title_6
5 .atlas-title__text,
.atlas-p,
.atlas-ul,
.atlas-ol,
.atlas-code

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

Number of declarations per ruleset

4 Heavy rulesets This classes potentially could be changed to single class

Declarations  
21 .atlas-toc
20 .atlas-playground__notifier
18 .atlas-copier__message
17 .atlas-playground__summary

0 Empty rulesets This selectors should be removed from project

3 js- prefixed selectors This selectors should not be used for styling, since it SoC violation

  • .atlas-playground__notifier.js-show

  • .atlas-playground.js-opened .atlas-playground__example

  • .atlas-playground.js-opened .atlas-playground__example *

1 Universal selectors Universal selectors could affect performance and encapsulation of components

  • .atlas-playground.js-opened .atlas-playground__example *

0 Id selectors It is bad practice to use IDs as selectors for specificity and reusability reasons

0 Important rules Important rules could dramatically decrease project maintainability and scalability

Consistency

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

697 total, 333 unique declarations. Reusability index: 52%.

Color
72% reusability index
Background Color
43% reusability index
Font Size
50% reusability index
Font Family
83% reusability index
Border radius
50% reusability index
Z-index
69% reusability index

14 Unique Colors

  • Aa

    transparent

  • Aa

    inherit

  • Aa

    rgba(0,0,0,0.3)

  • Aa

    #fff

  • Aa

    whitesmoke

  • Aa

    #ccc

  • Aa

    #abd2ed

  • Aa

    #999

  • Aa

    #a3d65c

  • Aa

    #f73b3b

  • Aa

    #f7b23b

  • Aa

    #3281e2

  • Aa

    #195cae

  • Aa

    #595959

17 Unique Background Colors

  • transparent
  • rgba(171,210,237,0.125)
  • rgba(0,0,0,0.3)
  • rgba(0,0,0,0.5)
  • #fff
  • #fcfcfc
  • #f2f2f2
  • #98a3ed
  • #e56daa
  • #6d7ce5
  • #51adf6
  • #f7b23b
  • #2196f3
  • #0c7cd5
  • #595959
  • #38382d
  • #2a2a22

20 Unique Font Sizes

  • Abc

    4rem

  • Abc

    3rem

  • Abc

    2.441rem

  • Abc

    2rem

  • Abc

    1.563rem

  • Abc

    1.25rem

  • Abc

    1.2rem

  • Abc

    1rem

  • Abc

    inherit

  • Abc

    .9375rem

  • Abc

    .875rem

  • Abc

    0.85em

  • Abc

    .8125rem

  • Abc

    0.8em

  • Abc

    0.8rem

  • Abc

    12.75px

  • Abc

    .75rem

  • Abc

    0.7rem

  • Abc

    .6875rem

  • Abc

    .625rem

3 Unique Font Families

  1. Aa

    "Arial","FreeSans",sans-serif

  2. Aa

    "DejaVu Sans Mono","SFMono-Regular","Menlo","Consolas","Lucida Console",monospace

  3. Aa

    inherit

5 Unique Border Radii

  • 3px

  • 0

  • 5px

  • 4px

  • .3125rem

4 Unique Z Indices

  • 0

  • 1

  • 5

  • 10

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

697 total, 333 unique declarations. Reusability index: 52%.

Margins
52% reusability index

  • 2.5rem

  • 1.25rem

  • .625rem

  • .3125rem

  • 0

  • auto

  • -.625rem

  • -1.25rem

Paddings
57% reusability index

  • 1.25rem

  • .625rem

  • .3125rem

  • 0.3em

  • 3px

  • 2px

  • 0.1em

  • 1px

  • 0

Line Heights
36% reusability index

  • 2.75rem

  • 2.5rem

  • 1.25rem

  • 1.5

  • 1.2

  • 3.75rem

  • 25px

  • 20px

  • 1

  • 1.6

  • .75rem

  • 1.4

  • .875rem

  • 10px

Widths
45% reusability index

  • 0

  • 100%

  • .875rem

  • 1.5rem

  • 250px

  • 18px

  • 15.625rem

  • 50%

  • 33.3333333333%

  • .75rem

  • .6875rem

  • .1875rem

  • .9375rem

Heights
9% reusability index

  • 1px

  • .875rem

  • 1.5rem

  • 90vh

  • 8px

  • 0

  • 1rem

  • .75rem

  • .1875rem

  • .9375rem

0 Media Queries Consistency of media queries utilization on the project