An Empirical Study on the Use of CSS Preprocessors

Cascading Style Sheets (CSS) is the standard language for styling structured documents, such as HTML. However, CSS lacks most of the traditional programming constructs, including variables and functions, which enable code reuse and structured programming. Alternatively, CSS Preprocessors (e.g., LESS, SASS) have been introduced as superset languages to extend CSS by supporting those missing constructs. While these languages are being widely used by developers, we do not have sufficient knowledge about how developers take advantage of the features they provide. Gaining this knowledge is crucial for providing better tool support to the developer community by devising techniques for the automatic migration of existing CSS code to take advantage of CSS Preprocessor language features, designing refactoring recommendation systems for existing Preprocessor code, and giving insights to the Preprocessor language designers for improving language usability. In this paper, we have empirically investigated the CSS Preprocessor codebase of 150 websites regarding four preprocessor features, namely variables, nested selectors, mixins and extend constructs, and report the discovered usage patterns for each feature. We also discuss how the gained knowledge can be put into practice towards improving the development and maintenance of CSS preprocessor code.