The application of CSS to major companies

HTML and CSS are sometimes treated as programming languages on some programming language prevalence statistics sites, but most programmers do not consider them to be part of the programming language because their various programming language features are very weak, such as logical control, cyclic operations, functions, etc. are seriously missing or insufficient, They are a markup language at best.

But in recent years with the more and more popular web applications, HTML5 and CSS3 slowly mature, people on the use of CSS and the use of more and more rich and diverse, many programmers feel that the pace of development of CSS is obviously not in keeping with the needs of the real, so for CSS, people developed a variety of tools to enhance CSS, For example, SCSS and less, these tools not only make CSS easier to manage, but also bring great improvements to CSS in terms of syntax and semantics.

The past 2014 has been an interesting year, and many well-known companies have disclosed how they use CSS through different media and channels. Includes the tools they use, the methods they use, their thinking about these methods, and the specific data and numbers involved. The most typical is the introduction of the CSS file on GitHub by Mark Otto. The purpose of this article is to bring them together in a centralized way for easy reference and comparison.

company Preprocessor prefix #源代码 #选择器 Accessibility Tools Description

Github SCSS Custom @mixins 100+ 7,000 scss-lint, Styleguide 2 final stylesheets, because of IE selector limit

Buffer less autoprefixer 5328 less lint 2 final stylesheets

Codepen SCSS autoprefixer 171 1186. Editorconfig Asset Pipeline

Ghost SCSS (Libsass) Autoprefixer 1609 general guidelines Open source

Groupon Sass (syntax unclear) Compass?? Smacss Toolstrap

Lonely Planet Sass autoprefixer 150+ 1527 Rizzo, no linting bem/oocss, normalize.css, SVG icons

Medium less Custom @mixins 50-100? Guidelines No nesting, custom methodology for naming

Trello less Custom @mixins 2,426 preprocessor 1 final stylesheet, namespacing

Appendix:

SCSS

Sass is a CSS (cascading style sheet) of the syntax of an extension, was born in 2007, the first and most mature CSS preprocessor language, it can use variables, constants, nesting, mixing, functions and other functions, can be more efficient and resilient to write CSS. Sass will eventually compile a legitimate CSS for the browser to use, that is, its own syntax is not too easy for the browser to recognize, because it is not a standard CSS format, within its syntax can use dynamic variables, etc., so it is more like a very simple dynamic language.

In fact, now Sass has two sets of grammatical rules: one still uses indentation as a delimiter to distinguish blocks of code, and another set of rules, like CSS, uses curly braces ({}) as delimiters. The latter syntax rule is also named SCSS, which is supported by the version after SASS3.

Less

An open source project in 2009, influenced by sass, but also using CSS syntax, made it easier for most developers and designers to get started. Less provides a number of ways to smoothly translate the written code into standard CSS code, and in many popular frameworks and tools you can often see less (for example, Twitter's bootstrap framework uses less).

According to Wikipedia, less is an open source project created by Alexis Sellier influenced by sass. Sass used indentation as a delimiter to differentiate blocks of code, rather than curly braces ({}) that were widely used in CSS. To make CSS existing users better and easier to use, Alexis developed less and provided a CSS-like writing function.