Introduction
CSS is how structured HTML gets turned into a properly laid out page. CSS is a language full of quirks and unpredictable behavior and as such it is often a developer's least favorite task.
The last several years have seen a marked uptick in the number of frameworks and tools available to help make writing CSS easier and less error prone. SASS and LESS rule the pre-processing landscape, and frameworks like Bootstrap, Foundation, Bourbon, Susy, and Unsemantic (and lots of others) are used to jumpstart getting a page styled.
Browsers have also changed, with all modern versions of browsers no longer needing vendor prefixes for their CSS3 rules. What was a best practice just a few years ago is often no longer needed, depending on what browsers your site supports.
This survey downloaded CSS files from over 8,000 domains and aggregated some data about how CSS is being used and written. I think this can be useful to drive conversations forward about how to organize, think about, and manage larger CSS projects, as well as to look at how the web is evolving.
Methodology
I wanted to sample a broad cross-section of the internet, including sites with large development teams and long life spans as well as newer properties produced by passionate amateurs.
My list of domains to scrape started with the top 1,000 Alexa sites to represent the 'popular' and 'large' end of the spectrum. They provide a CSV report of their top 1 million sites by trailing month traffic rank, so I included the top 1,000 from that.
To fill in the rest of the list of domains to survey I randomly sampled Quick Left's mailing list, which is a mix of past and potential clients, employees, fans, and other folks from around the world. I considered just sampling the top million list from Alexa randomly, but even the top million properties still includes larger sites compared to the estimated 271 million domains registered worldwide, so our mailing list was hopefully a better sample that could include MVPs, personal sites, and other 'scrappy' web properties.
The final list contained 10,400 domains that are roughly a representative sample of the internet. From these domains, I downloaded all of the CSS files linked from their main page with:
cat domains.txt | xargs -I % wget http://% -r -A '*.css*' -H --follow-tags=link
This process collected about 28,000 CSS files in total from those 10,400 domains. These were run through a CSS parser node module which let me save around 8.7 million records of selector, property, and value (e.g.
span.important, font-weight, bold). These were saved in Postgres, and heavily indexed for exploration.Summary Data
Properties
| Total unique CSS properties declared | 1,528 |
|---|---|
| Top 5 properties declared | color, width, display, content, background-color |
| Most common 50 properties as percentage of total | 85% |
| Number of valid style properties (according to the CSS Spec) | 79 (not counting vendor prefixes, which make this number higher) |
| Number of unique style properties scraped (valid and otherwise) | 372 |
| Breakdown of unique properties | 83 typos, ~210 unknown properties |
| Star Hack | Used 70,808 times on 59 properties, with * zoombeing the most common |
| Underscore Hack | Used 2,127 times, 48 properties, with _font-familybeing the most common |
| Vendor prefix properties | 609,000 or about 7% |
The distribution of CSS property usage appears close to a typical Pareto distribution. There appears to be diminishing utility in the oddball properties on the long tail, and learning the first 50 or so properties should be any beginner's first priority.
The number of typos and invalid rules was also very interesting to see. It was surprising that those rules were typed, (presumably) checked, no effect was seen in the browser, and they were left in the stylesheet and made it to production. My favorite typos were
bototm, foat, and heith.Selectors
| Top 5 most common selectors | body, textarea, h1, pre, h2 |
|---|---|
| Longest selector | .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey 221 characters |
| % Selectors including an #id | 13.7% |
| % Selectors including a .class | 84.1% |
| % Selectors including a :pseudo-selector | 20.4% |
| % Selectors including a ::pseudo-element-selector | 0.3% |
| % Selectors only using elements | 7.5% |
CSS selectors are generally short, with a few notable outliers. Brevity in selectors is generally considered good, as an element's overall layout ought to be composed of several rules layered onto one item. Systems such as BEM have sound reasoning on this topic. In general, very long and specific selectors prohibit reuse, and a reusable set of styles is considered a standard goal of CSS.
Classes are usually used in selectors, and single-element selectors such as
body are very common. I'd guess that these are from resets on most sites which start by selecting every element type and undoing most browser-set properties from them. These are usually selected again by the site-specific CSS and given base styles, resulting in at least two instances of these rules being selected.Progressive Enhancement
Prefix Usage
box-shadow | border-radius | transition | |
|---|---|---|---|
| No prefix | 79,438 | 103,599 | 43,442 |
-webkit | 58,840 | 49,747 | 41,117 |
-moz | 40,702 | 47,633 | 31,886 |
-o | 1,981 | 5,594 | 27,054 |
-ms | 823 | 4,576 | 11,371 |
Vendor prefixes are no longer needed for modern, self-updating browsers. The good news is that across all CSS3 properties the generic form was always used more frequently than any of the prefixes.
-webkitand -moz led -o and -ms consistently and by a healthy margin.
Many IDEs, CSS frameworks, and websites generate rulesets for you with prefixes already included. Developers can start to shed this extra weight (depending on the audience), and browser adoption is at the point where perhaps the prefixes don't need to be included out of habit. Make sure to cross reference Google Analytics for your site with CanIUse to see if it makes sense for your audience.
I saw lots of support for older IEs indicated by use of the
* and _ hacks. These are tools to write declarations that are only parsed by certain versions of Internet Explorer. Noted internet personality Paul Irish advocated for alternatives to browser hacks back in 2008, and the preferred method blessed by Microsoft is to use conditional comments to include a separate or supplementary stylesheet for those browsers. It can be easy to skip these approaches when you're in a hurry, however, so the star and underscore hacks persist.Colors
MOST COMMON COLORS
The colorspace provided by hex codes is 166 so common colors will most likely be in the greys, where
R == G == B. Greys will account for most font colors, border colors, and various box shadows (usually). Brand colors are much more likely to be unique to the site I didn't expect to see any off-greys in the top 10.
So the explanation of that blue is that untilmid November 2014
#428BCA was the value of the $brand-primary variable in Bootstrap, which is subsequently used all over the project. This indicates the popularity of that framework.UNITS
| Unit | Count | % of total |
|---|---|---|
| Hex | 1,113,681 | 99.6% |
| rgb/rgba | 49,789 | 0.4% |
| hsl/hsla | 121 | 0.001% |
Most
rgb was rgba and hsl was hsla. They were typically a grayscale variant with an opacity applied. This makes sense, as the alpha channel is the main advantage provided by those formats.
The average file had 169 color declarations. With several files downloaded per page, the abundance of colors indicates no coherent styleguide or use of color variables to keep a site's theme consistent.
Units
UNITS
| Unit | Count | % of length properties |
|---|---|---|
| px | 2,512,781 | 77.8% |
| % | 458,925 | 14.2% |
| em | 197,288 | 6.1% |
| rem | 51,155 | 1.6% |
| pt | 4,471 | 0.1% |
| calc() | 1,789 | 0.1% |
| vw | 516 | <0.1% |
| vh | 455 | <0.1% |
| cm | 303 | <0.1% |
| ex (height of an x character) | 158 | <0.1% |
| in | 62 | <0.1% |
| mm | 29 | <0.1% |
| pc (1pc == 12pt) | 11 | <0.1% |
| vmin | 2 | <0.1% |
| ch (height of a 0 (zero) character) | 0 | 0% |
| vmax | 0 | 0% |
There are a large number of options available when sizing a property in CSS. There are pros and cons for every unit: some adapt to responsive layouts better, others guarantee sizing for printing. The familiar standbys of 'absolute' (
px) and 'relative to the something' (%) dominate for their use cases. It should be noted that browser support for the more esoteric units isn't widespread.Text and Fonts
Having a set typographic grid can help a site feel cohesive and clear. Type contributes to hierarchy of design and how a user reads the content. The average domain across all stylesheets declared 31different font sizes.
The number of font sizes per domain was quite variable. It wasn't possible to tease out how many fonts were used on the homepage or how many were for special cases hidden elsewhere in the application. Some great looking sites seemed to cluster around 20 fonts in total for their sites. My opinion is that generally selecting fewer font sizes is better. It indicates a strong, cohesive design, as well as a good handoff process between developers and designers.
Responsive Design
Responsive design was first introduced in 2010 by Ethan Marcotte and has taken the web by storm with64% of sites scraped using some sort of media query in their CSS. Content needs to react to the size of the screen it's on, and if it's being shown on a mobile device or not.
Media Queries have been available since IE9, and they let you scope styles to certain viewport dimensions, orientations, and aspect ratios, enabling responsive design in a meaningful way.
The most common query is
max- or min-width, representing 89% of media queries. Here are the most common widths that developers made their styles react to:
The curve around 990px is particularly wide with many values registering at 960, 970, 980, and 990, 992, 1,000, and 1,024px. The other areas indicated on the curve with green lines are much narrower, showing a lower variance in breakpoints at that width.
What people choose as their breakpoints indicates what device form factors they want to respect. There seems to be a growing consensus about what denotes a 'phone' vs. a 'tablet' and 'desktop'. For reference, 768, 992, and 1200 are the current Bootstrap breakpoints that are turned on by default, andhere are some sample device widths
Framework Detection
FRAMEWORK USAGE
| Framework | Count | % of total sites with recognizable framework |
|---|---|---|
| Bootstrap | 918 | 78.2% |
| Foundation | 177 | 15.1% |
| 960.gs | 55 | 4.7% |
| Blueprint | 14 | 1.2% |
| Gumby | 10 | 0.9% |
It was hard to determine framework usage. I used a combination of searching for filenames, comments (often left in by well-behaved minifiers), and unique classes to come up with those values. This is the most shoot-from-the-hip table in the report, but it shows that Bootstrap definitely dominates hearts and minds. Only around 10% of the domains surveyed had identifiable frameworks.
Assets
Additional resource downloads can be specified in CSS, usually as
59800background-image declarations. Here are the most common file formats we found in the study:| Format | Count | % of total | Notes |
|---|---|---|---|
.png | 46,441 | 77.7% | |
.gif | 5,669 | 9.5% | |
.svg | 3,986 | 6.7% | |
.jpg or .jpeg | 3,550 | 5.9% | |
.htc | 101 | 1.2% | An HTML Component (I had to look it up) |
.php | 41 | 0.1% | Provided by a script |
.cur | 12 | < 0.1% | A custom cursor file |
These results are a good sign as
.png files are a general recommendation for non-photographic images on the web. It offers alpha transparency, good compression rates, and has wide browser support. I'm sure that .jpg files are more common than indicated here on the web, but are likely included as srcattributes on <img> tags, not in CSS.Trivia
MASSIVE Z-INDEX
Highest
z-index was an astonishing 999999999999999999999999999 or 9.99e26. With a default key repeat on OS X, this would take 3 seconds of holding down 9 to type. If you took that many pieces of paper at .05mm thick, the stack would reach from Earth to the Sun 10 trillion times. The worst part about this large of a z-index is that a number that high will overflow and not work in the expected manner anyhow. The lowest was a more reasonable -999999.NAMED CSS COLORS
The following named CSS colors occurred exactly once:
antiquewhite, azure, olive, bisque,aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange,seashell, ghostwhite, papayawhip, cornsilk, navajowhite. My favorite is papayawhip, a delightful orange-beige.Conclusions
After perusing the data set, I was able to draw some broad conclusions:
- People are sloppy in their CSS
- Well-maintained styleguides can address a lot of the commonly seen problems
- Modern CSS features are widely used
The best thing a company can do (especially true the more people are involved in writing CSS) is to run a CSS Audit. This will help identify past mistakes, and integrate tooling into your workflow to prevent mistakes moving forward.
Source: habrahabr.ru
TRANSLATION
No comments:
Post a Comment