Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins

Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins. Mazinanian, D. & Tsantalis, N. In Proceedings of the 31st IEEE/ACM International Conference on Automated Software Engineering, pages 672–683, New York, NY, USA, 2016. ACM. Invited to Special Issue of the Automated Software Engineering Journal

Paper

Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins [link]

Link doi abstract bibtex

Cascading Style Sheets (CSS) is the standard language for styling web documents and is extensively used in the industry. However, CSS lacks constructs that would allow code reuse (e.g., functions). Consequently, maintaining CSS code is often a cumbersome and error-prone task. Preprocessors (e.g., Less and Sass) have been introduced to fill this gap, by extending CSS with the missing constructs. Despite the clear maintainability benefits coming from the use of prepro-cessors, there is currently no support for migrating legacy CSS code to preprocessors. In this paper, we propose a technique for automatically detecting duplicated style declarations in CSS code that can be migrated to preproces-sor functions (i.e., mixins). Our technique can parameter-ize differences in the style values of duplicated declarations, and ensure that the migration will not change the presentation semantics of the web documents. The evaluation has shown that our technique is able to detect 98% of the mix-ins that professional developers introduced in websites and Style Sheet libraries, and can safely migrate real CSS code.

@inproceedings{Mazinanian:ASE:2016,
	author = {Mazinanian, Davood and Tsantalis, Nikolaos},
	title = {Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins},
	booktitle = {Proceedings of the 31st IEEE/ACM International Conference on Automated Software Engineering},
	--series = {ASE 2016},
	year = {2016},
	isbn = {978-1-4503-3845-5},
	location = {Singapore, Singapore},
	pages = {672--683},
	numpages = {12},
	--url = {http://doi.acm.org/10.1145/2970276.2970348},
	doi = {10.1145/2970276.2970348},
	acmid = {2970348},
	publisher = {ACM},
	address = {New York, NY, USA},
	keywords = {Cascading style sheets, duplication, migration, refactoring},
	url_Paper = {https://users.encs.concordia.ca/~nikolaos/publications/ASE_2016.pdf},
	url_link = {http://dmazinanian.me/publications/ASE'16/},
	abstract = {Cascading Style Sheets (CSS) is the standard language for styling web documents and is extensively used in the industry. However, CSS lacks constructs that would allow code reuse (e.g., functions). Consequently, maintaining CSS code is often a cumbersome and error-prone task. Preprocessors (e.g., Less and Sass) have been introduced to fill this gap, by extending CSS with the missing constructs. Despite the clear maintainability benefits coming from the use of prepro-cessors, there is currently no support for migrating legacy CSS code to preprocessors. In this paper, we propose a technique for automatically detecting duplicated style declarations in CSS code that can be migrated to preproces-sor functions (i.e., mixins). Our technique can parameter-ize differences in the style values of duplicated declarations, and ensure that the migration will not change the presentation semantics of the web documents. The evaluation has shown that our technique is able to detect 98% of the mix-ins that professional developers introduced in websites and Style Sheet libraries, and can safely migrate real CSS code.},
	bibbase_note = {<span style="color: blue"><strong>Invited to Special Issue of the Automated Software Engineering Journal</strong></span>},
}

Downloads: 0

{"_id":"eGFkuRCo5XfGmRf9W","bibbaseid":"mazinanian-tsantalis-migratingcascadingstylesheetstopreprocessorsbyintroducingmixins-2016","downloads":0,"creationDate":"2016-08-02T22:44:41.750Z","title":"Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins","author_short":["Mazinanian, D.","Tsantalis, N."],"year":2016,"bibtype":"inproceedings","biburl":"users.encs.concordia.ca/~nikolaos/publications.bib","bibdata":{"bibtype":"inproceedings","type":"inproceedings","author":[{"propositions":[],"lastnames":["Mazinanian"],"firstnames":["Davood"],"suffixes":[]},{"propositions":[],"lastnames":["Tsantalis"],"firstnames":["Nikolaos"],"suffixes":[]}],"title":"Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins","booktitle":"Proceedings of the 31st IEEE/ACM International Conference on Automated Software Engineering","--series":"ASE 2016","year":"2016","isbn":"978-1-4503-3845-5","location":"Singapore, Singapore","pages":"672–683","numpages":"12","--url":"http://doi.acm.org/10.1145/2970276.2970348","doi":"10.1145/2970276.2970348","acmid":"2970348","publisher":"ACM","address":"New York, NY, USA","keywords":"Cascading style sheets, duplication, migration, refactoring","url_paper":"https://users.encs.concordia.ca/~nikolaos/publications/ASE_2016.pdf","url_link":"http://dmazinanian.me/publications/ASE'16/","abstract":"Cascading Style Sheets (CSS) is the standard language for styling web documents and is extensively used in the industry. However, CSS lacks constructs that would allow code reuse (e.g., functions). Consequently, maintaining CSS code is often a cumbersome and error-prone task. Preprocessors (e.g., Less and Sass) have been introduced to fill this gap, by extending CSS with the missing constructs. Despite the clear maintainability benefits coming from the use of prepro-cessors, there is currently no support for migrating legacy CSS code to preprocessors. In this paper, we propose a technique for automatically detecting duplicated style declarations in CSS code that can be migrated to preproces-sor functions (i.e., mixins). Our technique can parameter-ize differences in the style values of duplicated declarations, and ensure that the migration will not change the presentation semantics of the web documents. The evaluation has shown that our technique is able to detect 98% of the mix-ins that professional developers introduced in websites and Style Sheet libraries, and can safely migrate real CSS code.","bibbase_note":"Invited to Special Issue of the Automated Software Engineering Journal","bibtex":"@inproceedings{Mazinanian:ASE:2016,\r\n\tauthor = {Mazinanian, Davood and Tsantalis, Nikolaos},\r\n\ttitle = {Migrating Cascading Style Sheets to Preprocessors by Introducing Mixins},\r\n\tbooktitle = {Proceedings of the 31st IEEE/ACM International Conference on Automated Software Engineering},\r\n\t--series = {ASE 2016},\r\n\tyear = {2016},\r\n\tisbn = {978-1-4503-3845-5},\r\n\tlocation = {Singapore, Singapore},\r\n\tpages = {672--683},\r\n\tnumpages = {12},\r\n\t--url = {http://doi.acm.org/10.1145/2970276.2970348},\r\n\tdoi = {10.1145/2970276.2970348},\r\n\tacmid = {2970348},\r\n\tpublisher = {ACM},\r\n\taddress = {New York, NY, USA},\r\n\tkeywords = {Cascading style sheets, duplication, migration, refactoring},\r\n\turl_Paper = {https://users.encs.concordia.ca/~nikolaos/publications/ASE_2016.pdf},\r\n\turl_link = {http://dmazinanian.me/publications/ASE'16/},\r\n\tabstract = {Cascading Style Sheets (CSS) is the standard language for styling web documents and is extensively used in the industry. However, CSS lacks constructs that would allow code reuse (e.g., functions). Consequently, maintaining CSS code is often a cumbersome and error-prone task. Preprocessors (e.g., Less and Sass) have been introduced to fill this gap, by extending CSS with the missing constructs. Despite the clear maintainability benefits coming from the use of prepro-cessors, there is currently no support for migrating legacy CSS code to preprocessors. In this paper, we propose a technique for automatically detecting duplicated style declarations in CSS code that can be migrated to preproces-sor functions (i.e., mixins). Our technique can parameter-ize differences in the style values of duplicated declarations, and ensure that the migration will not change the presentation semantics of the web documents. The evaluation has shown that our technique is able to detect 98% of the mix-ins that professional developers introduced in websites and Style Sheet libraries, and can safely migrate real CSS code.},\r\n\tbibbase_note = {Invited to Special Issue of the Automated Software Engineering Journal},\r\n}\r\n\r\n","author_short":["Mazinanian, D.","Tsantalis, N."],"key":"Mazinanian:ASE:2016","id":"Mazinanian:ASE:2016","bibbaseid":"mazinanian-tsantalis-migratingcascadingstylesheetstopreprocessorsbyintroducingmixins-2016","role":"author","urls":{" paper":"https://users.encs.concordia.ca/~nikolaos/publications/ASE_2016.pdf"," link":"http://dmazinanian.me/publications/ASE'16/"},"keyword":["Cascading style sheets","duplication","migration","refactoring"],"metadata":{"authorlinks":{"tsantalis, n":"https://users.encs.concordia.ca/"}}},"search_terms":["migrating","cascading","style","sheets","preprocessors","introducing","mixins","mazinanian","tsantalis"],"keywords":["cascading style sheets","duplication","migration","refactoring"],"authorIDs":["26F25mrCy7T7rPb9w","3qRNsweEm43DnPAQW","56e30457b0157d475000022e","5XouGeTdKx5HdMwEw","5dec78dddea90ade01000103","5dec7f6212c53edf0100001d","5deff52b14db5cdf01000138","5df7f399b9bb17df010000af","5e016539219bd5df0100004e","5e05305e709177de0100017c","5e083911f26b53de0100003e","5e093317934cacdf01000049","5e0eb04403f891de0100002f","5e114cc8b59632f201000002","5e1a7195b16ec5df01000036","5e1b4e1ca45296de0100002d","5e1c6348e556c6de010001ed","5e20a2babdda1fde01000154","5e34e15662bc74de01000104","5e3a3f96237cdede0100010b","5e3d784a96e576de01000030","5e3dc15507ca74de01000124","5e41f99eebe241de0100003f","5e45f427a5737fde01000060","5e57bb2e5d5d52de01000039","5e5bc6d660bedddf0100010a","5e6197b01d4ccede01000140","5e6433f65dc868f2010000a5","5e68cb81ae547ede01000126","5eS9bzfdGaQ4GaDE5","6KGKJMLQq3M44G4LH","83W9inhHEXg5AgLmq","8mo674MAKtcf6SiqM","8rHA9P2uRAb3iuiGi","B2k6Hs4FThtb5kfxT","BHfQDiWsqdafZDv9b","CkCEmaq6i7sXk8NEJ","Jg8FbNmwgKyChdnG4","P4eacBWqTBzYav8tT","P5Aogq5o8J6rmopBH","PAf39nEizb8hMZ7WQ","Phj9muFp7GqWHPvLd","QWp65FaEH2wWw4yXc","WFfhFsKNb3FvFKAPL","XeSh3r54reoCE7QGd","bmLQkvgn4PWoYGWbS","cE4DM5EcET7ZxhmDX","cZCwxznySvaDXbQar","eoXuku752KhMTg5oE","f92XurihpFeAKym5x","goCMJ6pePSRgWx6RX","j5ox8rzymtmrerHFg","jNZQAsgDdsNsDogqv","p2raZWJR2LtFbbnfc","tyBPWP6n29hXuqHqu","yvb36GKFuoNf7a3Pv","zidakMTJ7FpDExRWd","zqxyTmXj6b6xrSELR"],"dataSources":["QTWHMjYWdiuPhowbc","yj2z9AmsTGYHs5F2D"]}