An Empirical Study on the Use of CSS Preprocessors

Abstract

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.

Cascading Style Sheets CSS SANER

Downloads

  • The paper can be downloaded here.

Dataset

  • The analyzed Less files can be downloaded here.
  • The analyzed Sass files can be downloaded here.
  • The analyzed SCSS files can be downloaded here.
  • The collected data (as pipe-separated files) can be downloaded here.

Code

  • The Ruby code used for collecting information from Sass/SCSS files can be downloaded here. Please note that you will need to have the Sass code in a folder called Sass besides the given Sass-Empirical folder. We used Sass version 3.4.19. Run the code with two parameters: 1) the path to the output folder, and 2) the path to the folder in which you have all the folders with Sass/SCSS files (probably one folder for each web site). The tool will recursively search for a file called mainfiles.txt in each folder. This file contains the list of all preprocessor files (one file per line) inside the same folder, which are the main files for generating the CSS files (i.e., the files which probably import other files).
  • The Java code used for collecting information from Less files is included in our tool which can be downloaded here. Run it (ca.concordia.cssanalyser.app.CSSAnalyserCLI) with these params: --mode:empirical_study --outfolder:OUT/FOLDER --infolder:IN/FOLDER, where OUT/FOLDER is the path to the output folder and IN/FOLDER is the path to the input files. The tool will do the same thing as the Sass/SCSS code for finding and analyzing Less files.
  • R scripts used for analysis and generating paper’s plots can be found here (This is an R Studio project). Note that, first you will need to modify the pathToCSVs variable in the load.R file to point to the folder containing all pipe-separated files. Then source this file to get all the functions necessary for analyzing the data.

BibTex

@inproceedings{Mazinanian:CSSPreprocessorsEmpiricalStudy:Saner'16,
  author={D. Mazinanian and N. Tsantalis},
  booktitle={2016 IEEE 23rd International Conference on Software Analysis, Evolution, and Reengineering (SANER)},
  title={An Empirical Study on the Use of CSS Preprocessors},
  year={2016},
  volume={1},
  pages={168-178},
  keywords={document handling;program processors;software maintenance;structured programming;CSS code automatic migration;CSS preprocessor code development;CSS preprocessor code maintenance;CSS preprocessor language features;cascading style sheets;code reuse;extend constructs;language usability;mixins;nested selectors;recommendation system refactoring;structured documents;structured programming;superset languages;variables;Cascading style sheets;Color;Data preprocessing;HTML;Libraries;Programming;Syntactics},
  doi={10.1109/SANER.2016.18},
  month={March},
}