Pareto analysis of CSS

Highlighted below are the most widely used CSS declarations.

These are used mostly because most of them are supported in all browsers, they are quickest and shortest to write and make most sense in terms of design of usable and accessible interfaces.

Once again, Pareto’s analysis exemplifies itself in a similar way to how it exemplified itself with HMTL (see Pareto analysis of HTML) which implies that CSS implementation is possibly more extensive than it needs to be for most web site types.

1. :active
2. :after
3. :before
4. :first-child
5. :first-letter
6. :first-line
7. :focus
8. :hover
9. :lang
10. :link
11. :visited
12. background
13. background-attachment
14. background-color
15. background-image
16. background-position
17. background-repeat
18. background-repeat
19. border
20. border-bottom
21. border-bottom-color
22. border-bottom-style
23. border-bottom-width
24. border-collapse
25. border-color
26. border-left
27. border-left-color
28. border-left-style
29. border-left-width
30. border-right
31. border-right-color
32. border-right-style
33. border-right-width
34. border-spacing
35. border-style
36. border-top
37. border-top-color
38. border-top-style
39. border-top-width
40. border-width
41. bottom
42. caption-side
43. clip
44. color
45. counter-increment
46. counter-reset
47. cursor
48. direction
49. display
50. empty-cells
51. float
52. font
53. font-family
54. font-size
55. font-size-adjust
56. font-stretch
57. font-style
58. font-variant
59. font-weight
60. left
61. letter-spacing
62. line-height
63. list-style
64. list-style-image
65. list-style-position
66. list-style-type
67. margin
68. margin-bottom
69. margin-left
70. margin-right
71. margin-top
72. max-height
73. max-width
74. min-height
75. min-width
76. outline
77. outline-color
78. outline-style
79. outline-width
80. overflow
81. padding
82. padding-bottom
83. padding-left
84. padding-right
85. padding-top
86. position
87. right
88. table-layout
89. text-align
90. text-decoration
91. text-indent
92. text-transform
93. top
94. visibility
95. white-space
96. word-spacing
97. z-index

The use of above highlighted declarations is most common based on the projects I have worked on so far (small and large) and various analysis I have done on other web sites in the wild.

It does not mean that you are likely to use all of these declarations on all web sites.

It is also the case that some declarations are used for, essentially, wrong purposes. A great example is the use of line-height in order to position elements vertically, which, over time, can end up being counter-productive approach on larger web sites.

Nevertheless, line-height is a worth while declaration to utilise, for example, in order to make text easier to read on the screen as it is generally agreed that some extra spacing between the lines of text makes it easier to read off the screen.

Written by Jason Grant, BSc, MSc on 3rd April 2009

You can leave a response, or trackback from your own site.