Automated Analysis of CSS Rules to Support Style Maintenance
1 like460 views
This document discusses automated analysis of CSS rules to support style maintenance. It presents an approach that uses dynamic crawling and analysis to determine the relationship between CSS selectors and the DOM elements they target. By examining CSS rules and properties against actual DOM states at runtime, it can identify matched and unmatched selectors, effective versus ineffective rules, overridden declarations, and undefined CSS classes. This is implemented in a tool called Cilla, which generates reports on examined CSS resources and analysis results. An evaluation aims to determine Cilla's accuracy at detecting unused CSS code compared to other approaches, and quantify typical percentages of unused CSS in web systems.
![Unused CSS code consequences
• Higher load on the network, server, and browser
• More CPU consumption [Thiagarajan et al.,
WWW12]
17](https://image.slidesharecdn.com/icse12-141026004916-conversion-gate01/85/Automated-Analysis-of-CSS-Rules-to-Support-Style-Maintenance-17-320.jpg)
![Unused CSS code consequences
• Higher load on the network, server, and browser
• More CPU consumption [Thiagarajan et al.,
WWW12]
• Negative influence on the program
comprehension, maintainability, and code quality
18](https://image.slidesharecdn.com/icse12-141026004916-conversion-gate01/85/Automated-Analysis-of-CSS-Rules-to-Support-Style-Maintenance-18-320.jpg)
![Unused CSS code consequences
• Higher load on the network, server, and browser
• More CPU consumption [Thiagarajan et al.,
WWW12]
• Negative influence on the program
comprehension, maintainability, and code quality
• Loss of revenue and credibility
19](https://image.slidesharecdn.com/icse12-141026004916-conversion-gate01/85/Automated-Analysis-of-CSS-Rules-to-Support-Style-Maintenance-19-320.jpg)
Automated Analysis of CSS Rules to Support Style Maintenance
- 1. Automated Analysis of CSS Rules to Support Style Maintenance Ali Mesbah Shabnam Mirshokraie University of British Columbia
- 2. What is Cascading Style Sheets (CSS)? 2 A language for defining the presentation semantics of HTML elements
- 3. 3 CSS Rule #news span { color: red; }
- 4. 4 CSS Rule #news span { color: red; } Selector
- 5. 5 CSS Rule #news span { color: red; } Declaration Selector
- 6. What is Document Object Model (DOM)? dynamically accessing and updating the content, structure and style 6 html body P id=news head link Span Class=latest Text: World Text: latest news
- 7. 7 html body P id=news head link Span Class=latest Text: World Text: latest news #news span { color: red; }
- 8. 8 #news span { color: red; } html body P id=news head link Span Class=latest Text: World Text: latest news
- 9. Challenges Cascading, Inheritance, Selector specificity 9
- 10. 10 Challenges Cascading, Inheritance, Selector specificity Is this selector really effective or is it overridden by another rule? What will happen if I remove this rule? ...
- 11. 1111 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } DOM tree html body P id=news head link Span Class=latest html body P id=news Span Class=sports head link Div Class=sport
- 12. 12 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree
- 13. 1133 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree
- 14. 111444 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body P id=news head link Span Class=latest CSS Code Text: World Text: latest news DOM tree
- 15. 15 Problem: Accumulation of unused CSS code
- 16. Unused CSS code consequences • Higher load on the network, server, and browser 16
- 17. Unused CSS code consequences • Higher load on the network, server, and browser • More CPU consumption [Thiagarajan et al., WWW12] 17
- 18. Unused CSS code consequences • Higher load on the network, server, and browser • More CPU consumption [Thiagarajan et al., WWW12] • Negative influence on the program comprehension, maintainability, and code quality 18
- 19. Unused CSS code consequences • Higher load on the network, server, and browser • More CPU consumption [Thiagarajan et al., WWW12] • Negative influence on the program comprehension, maintainability, and code quality • Loss of revenue and credibility 19
- 20. 20 • Our Goal: Finding the relation between CSS and DOM • Our Approach: Dynamic analysis, dynamic crawling, automatic checking of CSS against DOM states at runtime • Output: Unmatched and ineffective rules, overridden declaration properties, undefined classes
- 21. The target landscape 21 Matched and effective All Selectors Matched and ineffective selectors Unmatched selectors Matched: Selector with at least one DOM element counter part Effective: Matched selector with at least one declaration property that is applied to a DOM element
- 22. Inferring the CSS and DOM relation Detecting matched and unmatched selectors – Evaluating the XPath expression of the selector on the current DOM tree 22
- 23. 2233 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree M
- 24. 222444 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport Matched M P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree M
- 25. M 25 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } Unmatched . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body P id=news head link Span Class=latest CSS Code html body P id=news Span Class=sports head link Div Class=sport M DOM tree Matched Matched
- 26. 222666 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html Matched body P id=news head link Span Class=latest CSS Code Text: World Text: latest news DOM tree M Matched Unmatched
- 27. 22227 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html Matched body P id=news head link Span Class=latest CSS Code Text: World Text: latest news DOM tree M Matched Matched Unmatched
- 28. M 28 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } Unmatched Matched Unmatched html body Matched Matched P id=news head link Span Class=latest Matched html body P id=news Span Class=sports head link Div Class=sport M M
- 29. M 29 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } Matched Unmatched html body Matched Matched P id=news head link Span Class=latest Matched html body P id=news Span Class=sports Unmatched head link Div Class=sport M M
- 30. Analysing the effectivity Infer the effectivity of selectors and declaration properties – Matching DOM elements against matched selectors 30
- 31. Analysing the effectivity Infer the effectivity of selectors and declaration properties – Matching DOM elements against matched selectors – Several matched selectors compete for a DOM element? 31
- 32. Analysing the effectivity Infer the effectivity of selectors and declaration properties – Matching DOM elements against matched selectors – Several matched selectors compete for a DOM element? • Sorting based on their specificity weight • Mark overridden as ineffective 32
- 33. 33 Output: • Effective and ineffective selectors and properties • Unused code: Union of Unmatched and Ineffective
- 34. 333444 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } DOM tree html body P id=news head link Span Class=latest html body P id=news Span Class=sports head link Div Class=sport M M M
- 35. 3333355555 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree M M
- 36. 33336666 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport M P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree Effective M
- 37. 37 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree Effective M M
- 38. 38 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree Effective M M Effective
- 39. 39 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } Effective Effective DOM tree html body P id=news head link Span Class=latest Text: World Text: latest news M
- 40. 40 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} Specificity: 0010 #news span { color: red; } Specificity: 0101 P . select { font−size: medium ; } Effective Effective DOM tree html body P id=news head link Span Class=latest Text: World Text: latest news M
- 41. 41 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} Specificity: 0010 #news span { color: red; } Specificity: 0101 P . select { font−size: medium ; } Effective Effective DOM tree html Ineffective Effective body P id=news head link Span Class=latest Text: World Text: latest news M
- 42. 444222 CSS Code #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } DOM tree Unmatched Unmatched html body P id=news head link Span Class=latest html body P id=news Span Class=sports head Ineffective link Div Class=sport
- 43. Detecting undefined classes Examine whether all the class attribute values are defined as CSS rules – The values of each node’s class attribute are checked against all the selectors 43
- 44. 4444 #news { background-color: silver; font : italic; color: black; } . sports { color: blue; text-decoration: underline; } H3, H4 { font−family: sans−serif; } . latest { color: green;} #news span { color: red; } P . select { font−size: medium ; } html body Div class=sport P id=news head link Span Class=sports CSS Code Text: Football Text: World Text: Sport news DOM tree Undefined class
- 45. Implementation of Cilla • Implementing the approach in an open-source tool called Cilla • Automatic DOM state exploration: Crawljax • Generating the report – Examined CSS resources, rules, selectors, and properties – Matched and unmatched selectors – Effective and ineffective selectors and properties – Undefined class values 45
- 46. Evaluation: Research questions • RQ1: What is the overall accuracy of Cilla in detecting unused CSS code? • RQ2: How does Cilla’s detection rate compare to existing approaches? • RQ3: What percentage of CSS code is typically unused in online web-based systems? 46
- 47. Evaluating the accuracy of reported unused CSS selectors RQ1 Approach: Measuring precision, recall, and F-measure on ten objects – Objects: Two open-source, one online web application, and seven randomly selected web applications 47
- 48. Evaluating the accuracy of reported unused CSS selectors RQ1 Results: High accuracy – 100% Recall – 80-100% Precision (low rate of false positives) • The explored state space is only a subset of the entire state space – 90-100% F-measure 48
- 49. 49
- 50. Evaluation: Research questions • RQ1: What is the overall accuracy of Cilla in detecting unused CSS code? • RQ2: How does Cilla’s detection rate compare to existing approaches? • RQ3: What percentage of CSS code is typically unused in online web-based systems? 50
- 51. Evaluation: Comparing the accuracy of Cilla with existing tools RQ2 Approach: Comparing precision, recall, and F-measure with Dust-Me Selector (DMS) and CSSESS on ten objects 51
- 52. 52 RQ2 Results: Cilla outperforms DMS and CSSESS
- 53. Evaluation: Research questions • RQ1: What is the overall accuracy of Cilla in detecting unused CSS code? • RQ2: How does Cilla’s detection rate compare to existing approaches? • RQ3: What percentage of CSS code is typically unused in online web-based systems? 53
- 54. Evaluation: The prevalence of unused CSS code in web applications RQ3 Approach: – Running Cilla on fifteen objects and calculating the percentage of the unused CSS code • Objects: Ten previously selected + Five online web application – Varying the number of DOM states until the number of unused selectors stabilizes 54
- 55. 55
- 56. Results: The prevalence of unused CSS code in web applications RQ3 Results: Huge amount of unused CSS code in online web applications 56
- 57. CSS Selectors Unused Selectors Used Selectors 57
- 58. 58 Unused Selectors Ineffective Selectors Unmatched Selectors CSS Selectors Used Selectors Unused Selectors
- 59. Conclusion • Automated approach for analyzing the relation between the CSS rules and DOM • Implementing an open-source tool called Cilla – Detecting unmatched and ineffective selectors and properties as well as undefined class values • Empirical evaluation on fifteen open-source and industrial web applications – Demonstrating the efficacy of the approach in automatically detecting unused CSS code (100% recall and 80-100% precision) – The ubiquity of the problem: On average 60% unused selectors and 52% unused properties 59