Application of CSS by major companies

HTML and CSS are sometimes treated as programming languages ​​on some programming language popularity statistics websites, but most programmers do not think that they belong to the category of programming languages ​​because their various programming language features are very different. Weak, for example, logic control, loop operations, functions, etc. are seriously lacking or insufficient. They are at best markup languages.

However, in recent years, as Web applications have become more and more popular, HTML5 and CSS3 have gradually matured, and people have become more and more abundant and diverse in the amount and way of using CSS. Many programmers feel that the pace of development of CSS has obviously not kept up with the actual needs. , so for CSS, people have developed various tools to enhance CSS, such as SCSS and LESS. These tools not only make CSS easier to manage, but also bring huge improvements to CSS in terms of syntax and semantics.

The past 2014 was an interesting year. Many well-known companies disclosed how they use CSS through different media and channels. It includes the tools they used, the methods they used, their thoughts on these methods, and the specific data and figures involved. The most typical one is Mark Otto's introduction to CSS files on Github. The purpose of this article is to bring them together in a centralized manner for everyone's reference and comparison.

Company Preprocessor Prefix #Source code #Selector Auxiliary tools illustrate

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

Buffer LESS Autoprefixer 93 5328 LESS lint 2 final stylesheets

​CodePen SCSS Autoprefixer 171 1186 .editorconfig Asset pipeline

Ghost SCSS (libsass) Autoprefixer 36 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 44 2,426 Preprocessor 1 final stylesheet, namespacing

Appendix:

SCSS

Sass is an expansion of the syntax of CSS (Cascading Style Sheets). It was born in 2007. It is the earliest and most mature CSS preprocessor language. It can use variables, constants, nesting, mixins, functions and other functions. CSS can be written more efficiently and flexibly. Sass will eventually compile legal CSS for the browser to use, which means that its own syntax is not easy for the browser to recognize, because it is not a standard CSS format, and dynamic variables can be used within its syntax, so It is more like a very simple dynamic language.

In fact, Sass now has two sets of grammar rules: one still uses indentation as a separator to distinguish code blocks; the other set of rules uses braces ({}) as a separator like CSS. The latter grammar rule is also called SCSS, and is supported by versions after Sass3.

LESS

An open source project in 2009, it was heavily influenced by Sass, but it also used CSS syntax, making it easier for most developers and designers to get started. LESS provides a variety of ways to smoothly convert written code into standard CSS code. LESS can often be seen in many popular frameworks and tools (for example, Twitter's Bootstrap framework uses LESS).

According to the introduction on Wikipedia, LESS is actually an open source project created by Alexis Sellier under the influence of Sass. At that time, SASS used indentation as a separator to distinguish code blocks, instead of the curly brackets ({}) widely used in CSS. In order to make it more convenient for existing users of CSS, Alexis developed LESS and provided CSS-like writing functions.

The above is the detailed content of Application of CSS by major companies. For more information, please follow other related articles on the PHP Chinese website!