January 27, 2015 at 00:502014 CSS Report: Test CSS Use in the Field
- Transfer
CSS is a tool through which HTML is transformed into a completely page layout. CSS is a language full of weirdness and unpredictable twists, and therefore most often creating stylesheets is the least favorite work for a developer. Over the past few years, there has been a significant increase in the number of shells and tools that make it easier to write CSS and reduce the chance of errors. SASS and LESS rule the ball in the field of preprocessing, and shells such as Bootstrap, Foundation, Bourbon, Susy, and Unsemantic (as well as many others) are used to speed up getting the page up.
Browsers are also changing, so many modern versions of browsers no longer require a vendor prefix for CSS3 rules. What was a best practice several years ago is no longer required, of course, depending on which browsers your website supports. In the course of our research, we downloaded CSS files from more than 8,000 domains, and collected some information about writing and using CSS. I think that this can be useful for the further development of the discussion about the organization, understanding and management of large CSS projects, and will also allow us to observe the development of the Web.
Methodology
I wanted to make a wide “slice” of the Internet, including sites created by large development teams and with a long service life, as well as the latest properties created by amateur enthusiasts.
The list of domains I’m studying is topped by the top 1,000 sites according to Alexa , which are a selection of “popular” and “large” sites. They report a million sites with the highest monthly traffic, so I just selected the first 1,000 of them.
In order to fill in the rest of the list of domains under study, I selected arbitrary sites from the Quick Left mailing list, which is a mixture of past and potential customers, employees, fans and other people from around the world. At first, I wanted to make a random selection of the Top 1,000,000 Alexa sites, however even this list includes only the largest sites, which is approximately 271 million worldwide registered domains, so our mailing list, I hope, is the best selection that may include MVP, personal pages, and other incoherent web properties.
The final list was 10,400 domains, roughly speaking, a representative sample of the Internet. I downloaded from these sites all the CSS files that the main page links to:
This process collected a total of about 28,000 CSS files from those 10,400 domains. Then they drove them through the CSS parsing module, which allowed me to save more than 8.7 million records of selectors, properties and values (for example, span.important, font-weight, bold). They were stored at Postgres and indexed for further research.
Summary data
The distribution of the CSS properties used approximates the standard Pareto distribution. It turned out that unusual properties are used extremely rarely, and the study of the first 50 or so properties should be a priority for any novice developer.
It was also very curious to find out the number of typos and invalid rules. Surprisingly, these rules were typed, (most likely) checked, it turned out that they did not work in the browser, but they were still left in the style sheets and added to the finished product. Most of all I liked the typos bototm, foat and heith.
Selectors
Selector length distribution
CSS selectors are mostly concise, with a few noteworthy exceptions. The brevity of selectors in most cases is considered a positive property, since the general arrangement of an element should consist of several rules related to one element. Systems such as BEM justified this. In general, long and uncommon selectors prevent reuse, and a reusable set of styles is considered the standard end use for CSS.
Classes are often used in selectors, and singleton selectors like body are widespread. I think that the reason for this was that many sites initially reset all types of elements that are set in the default browser settings, and set the type of each element on their own. These types are usually selected from the CSS site and the existing base styles, resulting in at least two instances of this rule being selected.
Continuous Improvement
Using Prefixes
Software vendor prefixes for modern, self-updating browsers are no longer required. The good news is that for all CSS3 properties, the original form is used much more often than any of the prefixes. The prefixes -webkit and -moz prevail over -o and -ms by a considerable margin.
Many IDEs, CSS wrappers, and websites generate rule sets with prefixes already included. Developers may try to get rid of this extra weight (depending on the audience), and adaptation to the browser is not the case when prefixes should be added out of habit. Use CanIUse to cross-reference the Google Analytics for your site to determine if this makes sense to your audience.
I have seen many cases of support for older versions of IE, as indicated by the hacks * and _. These are tools to write code that only certain versions of Internet Explorer can read. A well-known personality on the Internet, Paul Irish, promoted alternatives to using hacks in a browser back in 2008, and a method approved by Microsoft is to use conditional comments to include separate or auxiliary style sheets for the respective browsers. However, in a hurry, it’s easier to skip such approaches, so hack asterisks and hack underscores still prevail.
Colors
MOST COMMON COLORS
The color space offered by the hexadecimal codes is 166 colors, and the most common colors are likely to be among the shades of gray when R == G == B. Grayscale can relate to text color, border color, various shadows of dialog boxes . Branded colors are most often unique for each site, and I did not expect to see other colors, except shades of gray, in the top 10.
An explanation of the fact that blue got into the top ten is the fact that until mid-November 2014 the value # 428BCA corresponded to the $ brand-primary variable in Bootstrap, which was subsequently used throughout the project. This indicates the popularity of this software shell.
On average, a file has 169 declared colors. Several files were loaded for each page, and the abundance of colors demonstrates the lack of a uniform policy in the field of style or the use of color variables to maintain the color theme of the site.
Units
There is a huge selection of options available when setting dimensional properties in CSS. Each unit of measurement has its own advantages and disadvantages: some adapt better to a responsive design, others guarantee scaling when printing. The familiar and well-known “absolute” (px) and “relative” (%) prevail in the number of cases of use. It should be noted that browser support for more exotic units is not so widespread.
Text and fonts
Having a set of fonts installed allows the site to create the impression of a uniform and understandable. The font contributes to the design hierarchy and to the ability of the user to read the content. The middle domain has 31 declared different font sizes in all stylesheets.
Number of font sizes
The number of font sizes per domain varies greatly. It is impossible to calculate how many fonts were used on the main page or how many were hidden in the bins of the application for special cases. Some great looking sites use a total of up to 20 fonts for their pages. I think it's better not to chase the number of font sizes. This gives the impression of a strong, consistent design, and also facilitates collaboration between designers and developers.
Responsive Design
Responsive design was first introduced in 2010 by Ethan Marcott and swirled around the net, leaving about 64% of sites cleaned up using some kind of media queries in CSS. Content should be adjusted to the size of the screen on which it will be displayed, and whether it will be displayed on a mobile or stationary device.
Media queries have become available since IE9, and they allow you to customize styles according to specific screen sizes, its orientation, height to width ratio, allowing a responsive design to show all its advantages.
The most common media queries are max- or min-width, accounting for 89% of all media queries. Below are the most common widths that developers make their styles react to:
The curve in the region of the 990 px point is wider than the others; it also includes many other values: 960, 970, 980, and 990, 992, 1000, and 1024 px. Other areas on the curve, indicated by green lines, are much narrower, which shows a smaller scatter of values relative to control points with such a width.
The points that people choose as control points indicate which form factors they want to build on. There is a growing differentiation of devices on the so-called. “Phones,” “Tablets,” and “Desktops.” In particular, Bootstrap's current default breakpoints are 768, 992, and 1200. Here are some screen widths for devices.
Frameworks
Determining the software environment used was not easy. To get the values, I used a combination of searching by file names, comments (often left by respectable minimizers) and unique classes. This is the least accurate table in this report, but it does show that Bootstrap is a leader by far in the hearts and minds of developers. Only about 10% of the total number of domains studied had a defined software environment.
Additional resources The
loading of additional resources can also be defined in CSS, this usually refers to the definition of the background image (background-image). Below are the most common file formats that we identified in our study. In total, about 59800 objects were investigated.
Such results are a good sign, since the .png extension is generally recommended for non-photographic images on the net. Such files have alpha opacity, good compression ratio and broad browser support. I am sure that .jpg files are more common on the network than indicated here, but they are more often used as src attributes in tags, rather than in CSS.
Miscellaneous
HUGE Z-INDEX
The highest z-index was an unimaginable number, 99999999999999999999999999999, or 9.99e26. With the default key repetition value for OS X, typing this number will take 3 seconds to continuously hold the key 9. If you take so many sheets of paper 0.05 mm thick, the height of the resulting stack will be a distance 10 times the distance from Earth to the Sun . The worst part is that such a large declared z-index will cause an overflow, and will never work as expected. The lowest detected value is more justified - -999999 .
COLOR NAMES IN CSS
The CSS color names listed below were found only once: antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite. My favorite color is papayawhip, delicious orange-beige.
Conclusions
After analyzing the data, I was able to draw the following general conclusions:
1. People do not care too much about their CSS
2. Well-done stylesheets can solve many common problems
3. Modern CSS functions are widely used The
best that a company can do (especially if it’s by writing CSS employs a large number of workers) - conduct a CSS audit ( note from a translator:a brief description of the basic principles of this procedure will be given in our next article). This will allow to identify the mistakes made earlier and introduce tools into the production process, which helps to avoid mistakes in the future.
The order in your CSS tables is just as important as writing clean, well-crafted code. I bet that bad CSS can slow down developers more than any other technical aspect, proportionately depreciating their work. The team must ensure that CSS is kept clean and tidy.
Browsers are also changing, so many modern versions of browsers no longer require a vendor prefix for CSS3 rules. What was a best practice several years ago is no longer required, of course, depending on which browsers your website supports. In the course of our research, we downloaded CSS files from more than 8,000 domains, and collected some information about writing and using CSS. I think that this can be useful for the further development of the discussion about the organization, understanding and management of large CSS projects, and will also allow us to observe the development of the Web.
Methodology
I wanted to make a wide “slice” of the Internet, including sites created by large development teams and with a long service life, as well as the latest properties created by amateur enthusiasts.
The list of domains I’m studying is topped by the top 1,000 sites according to Alexa , which are a selection of “popular” and “large” sites. They report a million sites with the highest monthly traffic, so I just selected the first 1,000 of them.
In order to fill in the rest of the list of domains under study, I selected arbitrary sites from the Quick Left mailing list, which is a mixture of past and potential customers, employees, fans and other people from around the world. At first, I wanted to make a random selection of the Top 1,000,000 Alexa sites, however even this list includes only the largest sites, which is approximately 271 million worldwide registered domains, so our mailing list, I hope, is the best selection that may include MVP, personal pages, and other incoherent web properties.
The final list was 10,400 domains, roughly speaking, a representative sample of the Internet. I downloaded from these sites all the CSS files that the main page links to:
cat domains.txt | xargs -I % wget http://% -r -A '*.css*' -H --follow-tags=link
This process collected a total of about 28,000 CSS files from those 10,400 domains. Then they drove them through the CSS parsing module, which allowed me to save more than 8.7 million records of selectors, properties and values (for example, span.important, font-weight, bold). They were stored at Postgres and indexed for further research.
Summary data
The distribution of the CSS properties used approximates the standard Pareto distribution. It turned out that unusual properties are used extremely rarely, and the study of the first 50 or so properties should be a priority for any novice developer.
It was also very curious to find out the number of typos and invalid rules. Surprisingly, these rules were typed, (most likely) checked, it turned out that they did not work in the browser, but they were still left in the style sheets and added to the finished product. Most of all I liked the typos bototm, foat and heith.
Selectors
Selector length distribution
CSS selectors are mostly concise, with a few noteworthy exceptions. The brevity of selectors in most cases is considered a positive property, since the general arrangement of an element should consist of several rules related to one element. Systems such as BEM justified this. In general, long and uncommon selectors prevent reuse, and a reusable set of styles is considered the standard end use for CSS.
Classes are often used in selectors, and singleton selectors like body are widespread. I think that the reason for this was that many sites initially reset all types of elements that are set in the default browser settings, and set the type of each element on their own. These types are usually selected from the CSS site and the existing base styles, resulting in at least two instances of this rule being selected.
Continuous Improvement
Using Prefixes
Software vendor prefixes for modern, self-updating browsers are no longer required. The good news is that for all CSS3 properties, the original form is used much more often than any of the prefixes. The prefixes -webkit and -moz prevail over -o and -ms by a considerable margin.
Many IDEs, CSS wrappers, and websites generate rule sets with prefixes already included. Developers may try to get rid of this extra weight (depending on the audience), and adaptation to the browser is not the case when prefixes should be added out of habit. Use CanIUse to cross-reference the Google Analytics for your site to determine if this makes sense to your audience.
I have seen many cases of support for older versions of IE, as indicated by the hacks * and _. These are tools to write code that only certain versions of Internet Explorer can read. A well-known personality on the Internet, Paul Irish, promoted alternatives to using hacks in a browser back in 2008, and a method approved by Microsoft is to use conditional comments to include separate or auxiliary style sheets for the respective browsers. However, in a hurry, it’s easier to skip such approaches, so hack asterisks and hack underscores still prevail.
Colors
MOST COMMON COLORS
The color space offered by the hexadecimal codes is 166 colors, and the most common colors are likely to be among the shades of gray when R == G == B. Grayscale can relate to text color, border color, various shadows of dialog boxes . Branded colors are most often unique for each site, and I did not expect to see other colors, except shades of gray, in the top 10.
An explanation of the fact that blue got into the top ten is the fact that until mid-November 2014 the value # 428BCA corresponded to the $ brand-primary variable in Bootstrap, which was subsequently used throughout the project. This indicates the popularity of this software shell.
On average, a file has 169 declared colors. Several files were loaded for each page, and the abundance of colors demonstrates the lack of a uniform policy in the field of style or the use of color variables to maintain the color theme of the site.
Units
There is a huge selection of options available when setting dimensional properties in CSS. Each unit of measurement has its own advantages and disadvantages: some adapt better to a responsive design, others guarantee scaling when printing. The familiar and well-known “absolute” (px) and “relative” (%) prevail in the number of cases of use. It should be noted that browser support for more exotic units is not so widespread.
Text and fonts
Having a set of fonts installed allows the site to create the impression of a uniform and understandable. The font contributes to the design hierarchy and to the ability of the user to read the content. The middle domain has 31 declared different font sizes in all stylesheets.
Number of font sizes
The number of font sizes per domain varies greatly. It is impossible to calculate how many fonts were used on the main page or how many were hidden in the bins of the application for special cases. Some great looking sites use a total of up to 20 fonts for their pages. I think it's better not to chase the number of font sizes. This gives the impression of a strong, consistent design, and also facilitates collaboration between designers and developers.
Responsive Design
Responsive design was first introduced in 2010 by Ethan Marcott and swirled around the net, leaving about 64% of sites cleaned up using some kind of media queries in CSS. Content should be adjusted to the size of the screen on which it will be displayed, and whether it will be displayed on a mobile or stationary device.
Media queries have become available since IE9, and they allow you to customize styles according to specific screen sizes, its orientation, height to width ratio, allowing a responsive design to show all its advantages.
The most common media queries are max- or min-width, accounting for 89% of all media queries. Below are the most common widths that developers make their styles react to:
The curve in the region of the 990 px point is wider than the others; it also includes many other values: 960, 970, 980, and 990, 992, 1000, and 1024 px. Other areas on the curve, indicated by green lines, are much narrower, which shows a smaller scatter of values relative to control points with such a width.
The points that people choose as control points indicate which form factors they want to build on. There is a growing differentiation of devices on the so-called. “Phones,” “Tablets,” and “Desktops.” In particular, Bootstrap's current default breakpoints are 768, 992, and 1200. Here are some screen widths for devices.
Frameworks
Determining the software environment used was not easy. To get the values, I used a combination of searching by file names, comments (often left by respectable minimizers) and unique classes. This is the least accurate table in this report, but it does show that Bootstrap is a leader by far in the hearts and minds of developers. Only about 10% of the total number of domains studied had a defined software environment.
Additional resources The
loading of additional resources can also be defined in CSS, this usually refers to the definition of the background image (background-image). Below are the most common file formats that we identified in our study. In total, about 59800 objects were investigated.
Such results are a good sign, since the .png extension is generally recommended for non-photographic images on the net. Such files have alpha opacity, good compression ratio and broad browser support. I am sure that .jpg files are more common on the network than indicated here, but they are more often used as src attributes in tags, rather than in CSS.
Miscellaneous
HUGE Z-INDEX
The highest z-index was an unimaginable number, 99999999999999999999999999999, or 9.99e26. With the default key repetition value for OS X, typing this number will take 3 seconds to continuously hold the key 9. If you take so many sheets of paper 0.05 mm thick, the height of the resulting stack will be a distance 10 times the distance from Earth to the Sun . The worst part is that such a large declared z-index will cause an overflow, and will never work as expected. The lowest detected value is more justified - -999999 .
COLOR NAMES IN CSS
The CSS color names listed below were found only once: antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite. My favorite color is papayawhip, delicious orange-beige.
Conclusions
After analyzing the data, I was able to draw the following general conclusions:
1. People do not care too much about their CSS
2. Well-done stylesheets can solve many common problems
3. Modern CSS functions are widely used The
best that a company can do (especially if it’s by writing CSS employs a large number of workers) - conduct a CSS audit ( note from a translator:a brief description of the basic principles of this procedure will be given in our next article). This will allow to identify the mistakes made earlier and introduce tools into the production process, which helps to avoid mistakes in the future.
The order in your CSS tables is just as important as writing clean, well-crafted code. I bet that bad CSS can slow down developers more than any other technical aspect, proportionately depreciating their work. The team must ensure that CSS is kept clean and tidy.
Useful Paysto solutions for Habr readers:
→ Get paid by credit card right now. Without a site, IP and LLC.
→ Accept payment from companies online. Without a site, IP and LLC.
→ Accepting payments from companies for your site. With document management and exchange of originals.
→ Automation of sales and servicing transactions with legal entities. Without an intermediary in the calculations.
→ Accept payment from companies online. Without a site, IP and LLC.
→ Accepting payments from companies for your site. With document management and exchange of originals.
→ Automation of sales and servicing transactions with legal entities. Without an intermediary in the calculations.