DSL for CSS Coding Conventions

Supplements for “Language Design and Implementation for the Domain of Coding Conventions”

Boryana Goncharenko⋆ and Vadim Zaytsev⋆†

⋆University of Amsterdam, The Netherlands †Raincode, Belgium Contents – Appendix A. Claim 1 Dataset – Appendix B. Claim 2 Dataset – Appendix C. CSS Research – Appendix D. Abstract Object-oriented Syntax – Appendix E. Concrete Textual Syntax – Appendix F. CssCoco Plugin – Appendix G. CSS Convention Examples Catalogue

Appendix A. Claim 1 Dataset

Number Classification link to general link to wikipedia.org general link to wikipedia.org 1 Java link to oracle.com 2 Java link to oracle.com 3 Basic link to xoc.net 4 C# link to microsoft.com 5 Matlab link to columbia.edu 6 JS link to javascript.crockford.com 7 JS link to sideeffect.kr 8 Java link to sideeffect.kr 9 Python link to sideeffect.kr 10 Scala link to sideeffect.kr 11 Ruby link to sideeffect.kr 12 C# link to sideeffect.kr 13 PHP link to sideeffect.kr 14 C/C++ link to gcc.gnu.org 15 PHP link to mediawiki.org 16 PHP link to cakephp.org 17 Java link to source.android.com general link to c2.com 18 PHP link to wordpress.org 19 HTML link to wordpress.org 20 CSS link to wordpress.org 21 JS link to wordpress.org data link to nisra.gov.uk 22 C/C++ link to cs.rice.edu 23 C/C++ link to llvm.org 24 PHP link to drupal.org data link to nisra.gov.uk 25 JS link to aviyehuda.com 26 PHP link to stackoverflow.com 27 Java link to stackoverflow.com 28 Java link to stackoverflow.com 29 C# link to stackoverflow.com data link to unspsc.org general link to articlesontesting.com 30 SQL link to articlesontesting.com 31 JS link to gist.github.com 32 JS link to npmjs.com 33 C# link to stackexchange.com hardware link to dasplace.net 34 C/C++ link to google.github.io out of scope link to sourceforge.net 35 Fortran link to fortran.com out of scope link to teslamotorsclub.com 36 C/C++ link to research.microsoft.com 37 C/C++ link to codemuri.tistory.com 38 Fortran link to water.usgs.gov 39 Lisp link to cliki.net 40 Stat link to dell.com out of scope link to stniccc.com 41 Java link to quora.com 42 C/C++ link to codemuri.tistory.com 43 HTML link to gitbook.com 44 CSS link to gitbook.com 45 JS link to gitbook.com out of scope link to gofundme.com data link to medicaidalaska.com out of scope link to demozoo.org 46 C/C++ link to aliweb.cern.ch 47 Java link to slideshare.net 48 C/C++ link to sbin.org data link to collaboratemd.com 49 C/C++ link to fnal.gov 50 Python link to python.org 51 C/C++ link to freertos.org 52 C# link to worknet.googlecode.com 53 C/C++ link to image.diku.dk 54 Fortran link to cesm.ucar.edu data link to provcomm.ibx.com 55 ObjC link to developer.apple.com 56 ML link to it.uu.se 57 Java link to researchgate.net 58 C/C++ link to unrealengine.com data link to aace.com data link to lewisham.gov.uk hardware link to comprion.com 59 C# link to dotnetfunda.com 60 Paradox link to prestwood.com 61 Java link to mindprod.com duplicate link to hashnode.com hardware link to quizlet.com 62 Java link to geosoft.no 63 Flex link to infoq.com duplicate link to elsevier.com 64 C/C++ link to cws.cengage.co.uk out of scope link to eventbrite.de out of scope link to eventbrite.co.uk 65 C/C++ link to hackaday.com 66 C/C++ link to pjsip.org visual link to serverfault.com 67 R link to r-bloggers.com general link to carlopescio.com 68 ObjC link to corgitoergosum.net data link to fortherecordmag.com 69 Rust link to rust-lang.org 70 C/C++ link to softwareprojects.com 71 PHP link to softwareprojects.com 72 PHP link to exakat.io 73 Java link to apache.org 74 C/C++ link to software-dl.ti.com data link to help.pointforce.com general link to drdobbs.com 75 PHP link to osticket.com 76 PHP link to slideshare.net 77 C/C++ link to geeks3d.com duplicate link to cern.ch 78 C/C++ link to wireshark.org 79 ASP .NET link to visualstudiomagazine.com 80 C/C++ link to ludumdare.com 81 C/C++ link to scribd.com data link to erm-crm.org 82 Java link to prezi.com data link to books.google.com 83 ObjC link to groups.google.com data link to zxdemo.org out of scope link to djangocon.eu 84 C/C++ link to joelonsoftware.com data link to medicaidalaska.com 85 HTML link to navercorp.com 86 CSS link to navercorp.com 87 Java link to arxiv.org 88 Ruby link to rorlab.gitbooks.io 89 C/C++ link to pjsip.org 90 Fortran link to worldcat.org data link to amerihealth.com data link to fresh.unh.edu data link to books.google.com general link to polleverywhere.com 91 PHP link to codeigniter.com data link to atari-forum.com 92 C/C++ link to cprogramming.com 93 Java link to geotools.org hardware link to tomshardware.com 94 C/C++ link to google-melange.com 95 C/C++ link to tizen.org 96 XAML link to dotnetapp.com 97 C/C++ link to nanapro.org 98 Python link to bigbrotherbot.net 99 C/C++ link to rtems.org 100 Java link to liferay.com Appendix B. Claim 2 Dataset

Language Results Privatelee query SQL 75102 “coding+convention”+sql Perl 52801 “coding+convention”+perl Fortran 34701 “coding+convention”+fortran CSS 33602 “coding+convention”+AND+%28css+OR+cascading+style+sheets%29 HTML 29402 “coding+convention”+html VB 25301 “coding+convention”+vb Java 24702 “coding+convention”+java PHP 19702 “coding+convention”+php C++ 17302 “coding+convention”+c%2B%2B JS 16802 “coding+convention”+javascript bash 13100 “coding+convention”+bash ObjC 11901 “coding+convention”+AND+%28swift+OR+objective+c%29 Python 11302 “coding+convention”+python Matlab 11300 “coding+convention”+matlab C# 10801 “coding+convention”+c# Abap 9940 “coding+convention”+abap Scala 9110 “coding+convention”+scala Lisp 6011 “coding+convention”+lisp Groovy 5910 “coding+convention”+groovy Ruby 5141 “coding+convention”+ruby Ada 5110 “coding+convention”+ada Cobol 3770 “coding+convention”+cobol Lua 3420 “coding+convention”+lua Dart 2860 “coding+convention”+dart Prolog 2290 “coding+convention”+prolog Rust 1270 “coding+convention”+rust potato 997 “coding+convention”+potato Appendix C. CSS Research

This appendix contains all 41 papers with “CSS” or “Cascading Style Sheets” in the title, that were ever published on a CSS-related topic in a peer reviewed journal, magazine or proceedings volume.

References

[1] César F. Acebal, Bert Bos, María Rodríguez, and Juan Manuel Cueva Lovelle. “ALMcss: a Javascript Implementation of the CSS Template Lay- out Module”. In: ACM Symposium on Document Engineering (DocEng). Ed. by Cyril Concolato and Patrick Schmitz. ACM, 2012, pp. 23–32. doi: 10.1145/2361354.2361360. [2] Adewole Adewumi, Sanjay Misra, and Nicholas Ikhu-Omoregbe. “Com- plexity Metrics for Cascading Style Sheets”. In: Proceedings of the 12th International Conference on Computational Science and its Applications (ICCSA), Part IV. Ed. by Beniamino Murgante, Osvaldo Gervasi, San- jay Misra, Nadia Nedjah, Ana Maria A. C. Rocha, David Taniar, and Bernady O. Apduhan. Vol. 7336. LNCS. Springer, 2012, pp. 248–257. doi: 10.1007/978-3-642-31128-4_18 . [3] Amaia Aizpurua, Myriam Arrue, Markel Vigo, and Julio Abascal. “Explor- ing Automatic CSS Accessibility Evaluation”. In: Proceedings of the Ninth International Conference on Web Engineering (ICWE). Ed. by Martin Gaedke, Michael Grossniklaus, and Oscar Díaz. Vol. 5648. LNCS. Springer, 2009, pp. 16–29. doi: 10.1007/978-3-642-02818-2_2 . [4] Greg J. Badros, Alan Borning, Kim Marriott, and Peter J. Stuckey. “Con- straint Cascading Style Sheets for the Web”. In: Proceedings of the 12th An- nual ACM Symposium on User Interface Software and Technology (UIST). Ed. by Brad T. Vander Zanden and Joe Marks. ACM, 1999, pp. 73–82. doi: 10.1145/320719.322588. [5] Yung-Chen Chou and Hsin-Chi Liao. “A Webpage Data Hiding Method by Using Tag and CSS Attribute Setting”. In: Proceedings of the Tenth International Conference on Intelligent Information Hiding and Multi- media Signal Processing (IIH-MSP). Ed. by Junzo Watada, Akinori Ito, Jeng-Shyang Pan, Han-Chieh Chao, and Chien-Ming Chen. IEEE, 2014, pp. 122–125. doi: 10.1109/IIH-MSP.2014.37 . [6] Da-Chun Wu and Hsiu-Yang Su. “Information Hiding in EPUB Files by Rearranging the Contents of CSS Files”. In: Proceedings of the Ninth In- ternational Conference on Intelligent Information Hiding and Multimedia Signal Processing (IIH-MSP). Ed. by Kebin Jia, Jeng-Shyang Pan, Yao Zhao, and Lakhmi C. Jain. IEEE, 2013, pp. 80–83. doi: 10.1109/IIH- MSP.2013.29. [7] Karl Gyllstrom, Carsten Eickhoff, Arjen P. de Vries, and Marie-Francine Moens. “The Downside of Markup: Examining the Harmful Effects of CSS and Javascript on Indexing Today’s Web”. In: Proceedings of the 21st ACM International Conference on Conference on Information and Knowl- edge Management (CIKM). ACM, 2012, pp. 1990–1994. doi: 10.1145/ 2396761.2398558. [8] Alessandro Cogliati, Mikko Pohja, and Petri Vuorimaa. “XHTML and CSS Components in an XML Browser”. In: Proceedings of the International Conference on Internet Computing (IC), Volume 2. Ed. by Hamid R. Arabnia and Youngsong Mun. CSREA Press, 2003, pp. 563–572. [9] H.-S. Liang, K.-H. Kuo, P.-W. Lee, Y.-C. Chan, Y.-C. Lin, and M. Y. Chen. “SeeSS: Seeing What I Broke — Visualizing Change Impact of Cascading Style Sheets”. In: Proceedings of the 26th annual ACM symposium on User Interface Software and Technology (UIST). 2013, pp. 353–356. [10] Alessandro Cogliati and Petri Vuorimaa. “Optimized CSS Engine”. In: Proceedings of the Second International Conference on Web Information Systems and Technologies: Internet Technology / Web Interface and Ap- plications (WEBIST). Ed. by José A. Moinhos Cordeiro, Vitor Pedrosa, Bruno Encarnação, and Joaquim Filipe. INSTICC Press, 2006, pp. 206– 213. [11] Martí Bosch, Pierre Genevès, and Nabil Layaïda. “Automated Refactoring for Size Reduction of CSS Style Sheets”. In: ACM Symposium on Document Engineering (DocEng). ACM, 2014, pp. 13–16. doi: 10.1145/2644866. 2644885. [12] Davood Mazinanian, Nikolaos Tsantalis, and Ali Mesbah. “Discovering Refactoring Opportunities in Cascading Style Sheets”. In: Proceedings of the 22nd Symposium on the Foundations of Software Engineering (FSE). ACM, 2014, pp. 496–506. doi: 10.1145/2635868.2635879. [13] Pierre Genevès, Nabil Layaïda, and Vincent Quint. “On the Analysis of Cascading Style Sheets”. In: Proceedings of the 21st World Wide Web Con- ference (WWW). Ed. by Alain Mille, Fabien L. Gandon, Jacques Misselis, Michael Rabinovich, and Steffen Staab. ACM, 2012, pp. 809–818. doi: 10.1145/2187836.2187946. [14] Simon Harper, Sean Bechhofer, and Darren Lunn. “SADIe: Transcoding based on CSS”. In: Proceedings of the Eighth International ACM SIGAC- CESS Conference on Computers and Accessibility (ASSETS). Ed. by Simeon Keates and Simon Harper. ACM, 2006, pp. 259–260. doi: 10 . 1145/1168987.1169044. [15] Henrik Stormer. “Personalized Websites for Mobile Devices using Dynamic Cascading Style Sheets”. In: IJWIS 1.2 (2005), pp. 83–88. doi: 10.1108/ 17440080580000085. [16] Misko Hevery and Adam Abrons. “Declarative Web-Applications without Server: Demonstration of How a Fully Functional Web-Application Can Be Built in an Hour with only HTML, CSS & Javascript Library”. In: Companion to the 24th Annual ACM SIGPLAN Conference on Object- Oriented Programming, Systems, Languages, and Applications (OOPSLA). Ed. by Shail Arora and Gary T. Leavens. ACM, 2009, pp. 801–802. doi: 10.1145/1639950.1640022. [17] Kehinde Alabi. “Generation, Documentation and Presentation of Mathe- matical Equations and Symbolic Scientific Expressions Using Pure HTML and CSS”. In: Proceedings of the 16th International Conference on World Wide Web (WWW). Ed. by Carey L. Williamson, Mary Ellen Zurko, Peter F. Patel-Schneider, and Prashant J. Shenoy. ACM, 2007, pp. 1321–1322. doi: 10.1145/1242572.1242830. [18] Lin-Shung Huang, Zack Weinberg, Chris Evans, and Collin Jackson. “Pro- tecting Browsers from Cross-origin CSS Attacks”. In: Proceedings of the 17th Conference on Computer and Communications Security (CCS). Ed. by Ehab Al-Shaer, Angelos D. Keromytis, and Vitaly Shmatikov. ACM, 2010, pp. 619–629. doi: 10.1145/1866307.1866376. [19] Richard Duchatsch Johansen, Talita Cristina Pagani Britto, and Cesar Augusto Cusin. “CSS Browser Selector Plus: A JavaScript Library to Sup- port Cross-browser Responsive Design”. In: Companion Volume of the 22nd International World Wide Web Conference (WWW). Ed. by Leslie Carr, Alberto H. F. Laender, Bernadette Farias Lóscio, Irwin King, Marcus Fon- toura, Denny Vrandecic, Lora Aroyo, José Palazzo M. de Oliveira, Fer- nanda Lima, and Erik Wilde. ACM, 2013, pp. 27–30. [20] Matthias Keller and Martin Nussbaumer. “Cascading Style Sheets: A Novel Approach Towards Productive Styling With Today’s Standards”. In: Proceedings of the 18th International Conference on World Wide Web (WWW). Ed. by Juan Quemada, Gonzalo León, Yoëlle S. Maarek, and Wolfgang Nejdl. ACM, 2009, pp. 1161–1162. doi: 10.1145/1526709. 1526907. [21] Matthias Keller and Martin Nussbaumer. “CSS Code Quality: A Metric for Abstractness; Or Why Humans Beat Machines in CSS Coding”. In: Proceedings of the Seventh International Conference on the Quality of In- formation and Communications Technology (QUATIC). Ed. by Fernando Brito e Abreu, João Pascoal Faria, and Ricardo Jorge Machado. IEEE Computer Society, 2010, pp. 116–121. doi: 10.1109/QUATIC.2010.25. [22] Robert Kotcher, Yutong Pei, Pranjal Jumde, and Collin Jackson. “Cross- origin Pixel Stealing: Timing Attacks Using CSS Filters”. In: Proceedings of the SIGSAC Conference on Computer and Communications Security (CCS). Ed. by Ahmad-Reza Sadeghi, Virgil D. Gligor, and Moti Yung. ACM, 2013, pp. 1055–1062. doi: 10.1145/2508859.2516712. [23] Jakub Marszalkowski, Jan Mizgajski, Dariusz Mokwa, and Maciej Droz- dowski. “Analysis and Solution of CSS-Sprite Packing Problem”. In: ACM Transactions on the Web 10.1 (2016), p. 1. doi: 10.1145/2818377. [24] Davood Mazinanian and Nikolaos Tsantalis. “An Empirical Study on the Use of CSS Preprocessors”. In: Proceedings of the 23rd International Con- ference on Software Analysis, Evolution, and Reengineering (SANER). IEEE Computer Society, 2016, pp. 168–178. doi: 10.1109/SANER.2016. 18. [25] Matthew Hague, Anthony Widjaja Lin, and C.-H. Luke Ong. “Detect- ing Redundant CSS Rules in HTML5 Applications: a Tree Rewriting Ap- proach”. In: Proceedings of the 30th Conference on Object-Oriented Pro- gramming, Systems, Languages and Applications (OOPSLA). ACM, 2015, pp. 1–19. doi: 10.1145/2814270.2814288. [26] Ali Mesbah and Shabnam Mirshokraie. “Automated Analysis of CSS Rules to Support Style Maintenance”. In: Proceedings of the 34th International Conference on Software Engineering (ICSE). Ed. by Martin Glinz, Gail C. Murphy, and Mauro Pezzè. IEEE, 2012, pp. 408–418. isbn: 978-1-4673- 1067-3. doi: 10.1109/ICSE.2012.6227174. [27] Thomas H. Park, Brian Dorn, and Andrea Forte. “An Analysis of HTML and CSS Syntax Errors in a Web Development Course”. In: ACM Transac- tions on Computing Education (TOCE) 15.1 (2015), p. 4. doi: 10.1145/ 2700514. [28] Thomas H. Park, Ankur Saxena, Swathi Jagannath, Susan Wiedenbeck, and Andrea Forte. “Towards a Taxonomy of Errors in HTML and CSS”. In: Proceedings of the Ninth International Computing Education Research Conference (ICER). Ed. by Beth Simon, Alison Clear, and Quintin I. Cutts. ACM, 2013, pp. 75–82. doi: 10.1145/2493394.2493405. [29] Mikko Pohja and Petri Vuorimaa. “CSS Layout Engine for Compound Documents”. In: Proceedings of the Third Latin American Web Congress (LA-Web). IEEE Computer Society, 2005, pp. 148–156. doi: 10.1109/ LAWEB.2005.13. [30] Manuel Serrano. “HSS: a Compiler for Cascading Style Sheets”. In: Pro- ceedings of the 12th International Conference on Principles and Prac- tice of Declarative Programming (PPP). ACM, 2010, pp. 109–118. doi: 10.1145/1836089.1836103. [31] Adrian Sampson, Calin Cascaval, Luis Ceze, Pablo Montesinos, and Darío Suárez Gracia. “Automatic Discovery of Performance and Energy Pit- falls in HTML and CSS”. In: Proceedings of the International Symposium on Workload Characterization (IISWC). IEEE Computer Society, 2012, pp. 82–83. doi: 10.1109/IISWC.2012.6402904. [32] M. Serdar Biçer and Banu Diri. “Defect Prediction for Cascading Style Sheets”. In: Applied Soft Computing (2016). In press, corrected proof, avail- able online 30 May 2016. issn: 1568-4946. doi: 10.1016/j.asoc.2016. 05.038. [33] Dave Shea. “CSS Zen Garden”. In: Proceedings of the 31st International Conference on Computer Graphics and Interactive Techniques (SIG- GRAPH), Web Graphics. Ed. by Simon Allardice. ACM, 2004, p. 18. doi: 10.1145/1186194.1186219. [34] Håkon Wium Lie and Janne Saarela. “Multipurpose Web Publishing Using HTML, XML, and CSS”. In: Communications of the ACM 42.10 (1999), pp. 95–101. doi: 10.1145/317665.317681. [35] Jukka K. Korpela. “Lurching Toward Babel: HTML, CSS, and XML”. In: IEEE Computer 31.7 (1998), pp. 103–104. doi: 10.1109/2.689682. [36] Stuart Culshaw, Michael Leventhal, and Murray Maloney. “XML and CSS”. In: World Wide Web Journal 2.4 (1997), pp. 109–118. url: http: //www.xml.com/pub/a/w3j/s3.leventhal.html. [37] Jan Sutter, Kristian Sons, and Philipp Slusallek. “A CSS Integration Model for Declarative 3D”. In: Proceedings of the 20th International Conference on 3D Web Technology (Web3D). Ed. by Jinyuan Jia, Felix G. Hamza-Lup, and Tobias Schreck. ACM, 2015, pp. 209–217. doi: 10.1145/2775292. 2775295. [38] Alejandro Montes García, Paul De Bra, George H. L. Fletcher, and Mykola Pechenizkiy. “A DSL Based on CSS for Hypertext Adaptation”. In: Pro- ceedings of the 25th Conference on Hypertext and Social Media (HT). Ed. by Leo Ferres, Gustavo Rossi, Virgilio Almeida, and Eelco Herder. ACM, 2014, pp. 313–315. doi: 10.1145/2631775.2631782. [39] Hafez Rouzati, Luis Cruiz, and Blair MacIntyre. “Unified WebGL/CSS Scene-graph and Application to AR”. In: Proceedings of the 18th Interna- tional Conference on Web3D Technology. Ed. by Jorge Posada, Donald P. Brutzman, Denis Gracanin, Byounghyun Yoo, and David Oyarzun. ACM, 2013, p. 210. doi: 10.1145/2466533.2466568. [40] Naoki Takei, Takamichi Saito, Ko Takasu, and Tomotaka Yamada. “Web Browser Fingerprinting Using Only Cascading Style Sheets”. In: Proceed- ings of the 10th International Conference on Broadband and Wireless Computing, Communication and Applications (BWCCA). Ed. by Leonard Barolli, Fatos Xhafa, Marek R. Ogiela, and Lidia Ogiela. IEEE Computer Society, 2015, pp. 57–63. doi: 10.1109/BWCCA.2015.105. [41] Jesia Zakraoui and Wolfgang L. Zagler. “A Method for Generating CSS to Improve Web Accessibility for Old Users”. In: Proceedings of the 13th International Conference on Computers Helping People with Special Needs (ICCHP), Part I. Ed. by Klaus Miesenberger, Arthur I. Karshmer, Petr Penáz, and Wolfgang L. Zagler. Vol. 7382. LNCS. Springer, 2012, pp. 329– 336. doi: 10.1007/978-3-642-31522-0_50. Appendix D. Abstract Object-oriented Syntax

This appendix describes the abstract syntax of the designed domain-specific language. An overview of the abstract syntax will be followed by detailed views of each of the subclasses.

ConventionSet represents a style guide. It comprises a number of conventions that form coherent guidelines. Attribute contexts is a list of Contexts that contains contexts. Context represents a group of conventions that belong to the same semantic group (e.g. whitespacing, syntax preference, programming style). Attribute conventions is a list of Conventions that contains conventions. Attribute ignored_patterns is a list of Patterns that are ignored while searching for the target pattern. For example, while searching for violations of semantic conventions, the whitespacing and indentation nodes are ignored. Convention represents a rule that enforces specific constraints. Attribute pattern is the pattern that the convention targets. Attribute description is the description of the convention in natural text. This description is displayed to the user when a violation of the convention is discovered. PatternDescriptor represents a description of a node or a combination of related nodes that a given convention constraints. Attribute root is the top node described in the pattern. Attribute nodes is a collection of all nodes described by the pattern. Attribute relations is a collection of relationships between the nodes used in the pattern. NodeRelation represents a relation between two Nodes. Attribute tar- get_node designates a description of the Node targeted by the relation. NodeDescriptor is an abstract class that contains a description of a Css Node. Attribute constraint is an expression that designates the constraints applied to the node. Node represents a description of a node used in a PatternDescriptor. Attribute constraint is an expression that designates constraints applied to the node. Attribute identifier is a given string that can be used as a reference to the matched node. WhitespaceNode represents a description of a whitespace node that references space, newline, indentation symbols. Attribute constraint is an expression that designates constraints applied to the node. Attribute repeater is an optional constraint that specifies the number of times a whitespace node can appear consecutively. Repeaters are useful to express conventions that do not specify exact quantities of whitespace symbols. For example, the convention “put at least one blank line between rules” sets a lower limit of the number of blank lines, but not an upper limit.

Now a detailed view of the expressions in the abstract syntax of CssCoco will be followed by a description of the subclasses of Expression:

LiteralExpr represents an expression containing a literal value. Attribute value is the value of the literal expression. VariableExpr represents a reference to a matched node. Attribute name is the identifier used to reference the node. UnaryExpr represents expressions with a single operand. Attribute operand is operand of the expression. NotExpr represents negation expression. UnaryMinusExpr represents unary minus expression. UnaryPlusExpr represents unary plus expression. BinaryExpr represents expressions with two operands. Attributes left and right represent the first and second operands, respectively. OrExpr represents disjunction expression. AndExpr represents conjunction expression. ComparisonExpr represents expression that compares two operands. IsExpr represents expression that checks whether the first operand is of the given type, specified by the second operand. InExpr represents expression that checks whether the first operand is present in a list of values, specified by the second operand. MatchExpr represents expression that checks whether the first operand matches a regular expression, specified by the second operand. CallExpr represents expression that invokes a API property or method of the operand. Attribute operand is the operand of the expression. Attribute value is the name of the API property or method that is invoked. NodeQueryExpr represents expression that queries node context. Attribute operand is the node used as a reference point for the query.

The next diagram presents a detailed view of the literal expressions used in the abstract syntax of CssCoco, followed by a listing of the classes.

IntegerExpr represents expression containing an integer value. DecimalExpr represents expression containing a decimal value. StringExpr represents expression containing a string value. BooleanExpr represents expression containing a boolean value. NodeTypeExpr represents expression containing a string value that describes a node type. ListExpr represents expression containing a list value. The elements of the list are of type LiteralExpr.

In the same way we present the call expressions used in the abstract syntax of CssCoco, followed by a listing of the classes. PropertyExpr represents an expression that returns the value of a property of the operand node. Attribute operand represents the node targeted by the expression. Attribute value holds the name of the property that is accessed. MethodExpr represents an expression that invokes a method of the operand node. Attribute argument represents the argument passed to the invoked method.

Lastly, node query expressions:

NextSiblingExpr represents expression that returns the following sibling of the operand node. PreviousSiblingExpr represents expression that returns the previous sibling of the operand node. NodeQueryWithArgExpr represents expression that queries node context and uses additional constraints for the query. Attribute argument represents the additional constraints used by the query. ContainsExpr represents an expression that checks whether the operand node contains a node that matches given constraints. ContainsAllExpr represents an expression that checks whether the operand node contains nodes that match given constraints. CountExpr represents an expression that counts the number of ancestor nodes of the operand that match a given constraint. BeforeExpr represents an expression that checks whether a given pattern of nodes appears before the operand node. AfterExpr represents an expression that checks whether a given pattern of nodes appears after the operand node. BetweenExpr represents an expression that checks whether a given pattern of nodes appears between the two operand nodes. Appendix E. Concrete Textual Syntax

This appendix contains the concrete syntax of the designed DSL. Below are presented the grammar rules accompanied by the mapping to the abstract syntax of the language. stylesheet represents a style guide. Abstract Syntax Mapping: ast.ConventionSet. stylesheet : context* ; context represents a group of logically related conventions. A single style guide can comprise a number of conventions that enforce various constraints, e.g. whitespacing, syntax preference, program style. Contexts group conventions that ignore the same nodes while searching for their violations. Abstract Syntax Mapping: ast.Context. context : Identifier ignore_clause? '{' convention* '}' ; ignore_clause : 'ignore' node_descriptor+ (',' node_descriptor+)* ; convention represents a single rule in the style guide. Conventions are typically expressed by directly stating what is disallowed or describing a condition that if met, requires additional constraints. The former way of expressing conventions is represented by the forbid conventions. The latter approach uses the structure find ... require .... To break down complex disallowing conventions, the structure find ... forbid ... has been introduced. This aims at improving readability of conventions. Additionally, conventions have a where clause which applies constraints for matching nodes. It is used to expression matching constraints that span over multiple nodes and therefore cannot be present in the node descriptors. Abstract Syntax Mapping: ast.Convention. convention : 'forbid' pattern ('where' logic_expr)? 'message' String | 'find' pattern ('where' logic_expr)? ('require'|'forbid') logic_expr 'message' String ; pattern represents a pattern of nodes and their relations. For example, it can describe a horizontal sequence of sibling nodes, a vertical pattern of nested nodes, or pairs of elements with a common parent. Abstract Syntax Mapping: ast.PatternDescriptor. pattern : node_declaration (('in'|'next-to') node_declaration)* | fork ('in' node_declaration)* ; fork : '(' node_declaration (',' node_declaration)+ ')' ; node_declaration : (Identifier '=')? semantic_node ; node_descriptor represents a description of a node. It specifies the type of the node and its additional constraints. Abstract Syntax Mapping: ast.NodeDescriptor. node_descriptor : 'unique'? node_type ('{' (logic_expr|repeater) '}')? ; repeater : Integer ',' Integer? | (',')? Integer ; logic_expr represents expressions that perform logic operations and glue arithmetic and type expressions. Abstract Syntax Mapping: ast.NotExpr, ast.AndExpr, ast.OrExpr and all arithmetic_expression and type_expression mappings. logic_expr : '(' logic_expr ')' | 'not' logic_expr | logic_expr 'and' logic_expr | logic_expr 'or' logic_expr | type_expr | arithmetic_expr ; type_expr represents expressions that ensure node type and perform node queries on nodes. They are located in a separate parser rule because they interpret Identifiers as node type expressions instead of a API calls. Abstract Syntax Mapping: ast.IsExpr, ast.BeforeExpr, ast.AfterExpr, ast.BetweenExpr. type_expr : arithmetic_expr operator='is' Identifier | node_descriptor+ ('before' | 'after') type_operand | node_descriptor+ 'between' type_operand 'and' type_operand ; type_operand : Identifier | semantic_node ; arithmetic_expr represents arithmetic, comparison, set membership and regex expressions. These are located in a separate parser rule because they interpret identifiers as API calls instead of node type expressions. Abstract Syntax Mapping: ast.UnaryMinus, ast.UnaryPlus, ast.LessThan, ast.LessThanOrEq, ast.GreaterThan, ast.GreaterThanOrEq, ast.Equal, ast.NotEqual, ast.InExpr, ast.MatchExpr, ast.LiteralExpr. arithmetic_expr : ('-'|'+') arithmetic_expr | arithmetic_expr ('<'|'>'|'<='|'>='|'=='|'!=') arithmetic_expr | arithmetic_expr ('in'|'not in'|'match'|'not match') arithmetic_expr | call_expression | element ; element : Boolean | Decimal | Integer | String | list_ ; call_expression represents an API call expression and also node query expression. Abstract Syntax Mapping: ast.CallExpr and ast.NodeQueryExpr. call_expression : call_expression '.' call_expression | Identifier ('(' (element | semantic_node ) ')')? ; Boolean: represents Boolean literal expression. Abstract Syntax Mapping: ast.BooleanExpr. Boolean : 'true' | 'True' | 'false' | 'False' ; String: represents String literal expression. Abstract Syntax Mapping: ast.StringExpr. String : "'" (EscapeSequence | ~['])*? "'" ; EscapeSequence : "\\" "'" ; Integer: represents Integer literal expression. Abstract Syntax Mapping: ast.IntegerExpr. Integer : (ZeroDigit | NonZeroDigit Digit*) ; Digit : ZeroDigit | NonZeroDigit ; NonZeroDigit : [1-9] ; ZeroDigit : [0] ; Decimal: represents Decimal literal expression. Abstract Syntax Mapping: ast.DecimalExpr. Decimal : ( NonZeroDigit Digit* | ZeroDigit? ) '.' Digit+ ; Digit : ZeroDigit | NonZeroDigit ; NonZeroDigit : [1-9] ; ZeroDigit : [0] ; list and list_element represent the List literal expression. Abstract Syntax Mapping: ast.ListExpr. list_ : '[' list_element (',' list_element)* ']' ; list_element : Integer | Decimal | String | semantic_node ; Letter : [a-zA-Z] ; Identifier : (Letter)(Letter|Digit|'_'|'-')* ; type_expression represents the NodeType literal expression. Abstract Syntax Mapping: ast.NodeType. node_type : '(' node_type ')' | 'not' node_type | node_type 'and' node_type | node_type 'or' node_type | Identifier ; Appendix F. CssCoco Plugin

– http://github.com/boryanagoncharenko/CssCoco – http://github.com/boryanagoncharenko/Sublime-CssCoco – https://pypi.python.org/pypi?:action=display&name=csscoco Appendix G. CSS Convention Examples Catalogue

Layout and comments

Add /*LTR*/ to each use of left or right [42] X float: right; /* LTR */ × float: right; Add /*LTR*/ to each use of direction:ltr [42] X direction: ltr; /* LTR */ × direction: ltr; Use 4 (or 2) spaces for indentation [43, 44, 45, 46, 42, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57] × no indentation × indentation with tabs × indentation with the “wrong” number of spaces ? multiple properties in one line Indent declarations once [44, 58, 45, 42, 59, 52, 60] × no indentation × some declarations indented twice X contents of a @media rule can be indented twice X comments can have any indentation Indent all contents of a block [46] X everything inside each block is visually indented × no indentation × inconsistent indentation Closing curly bracket of a block must be vertically aligned with the selector of the rule [44, 58, 45, 42, 48, 49, 50, 54, 56] × inconsistent bracket positioning × closing bracket aligned with an opening curly × closing bracket aligned with the last property Vertically align vendor properties [59, 49, 50, 56, 45] X .foo { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } × .foo { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Vertically align values of related properties [59] X .bar { margin-right: -10px; margin-left: -10px; padding-right: -10px; padding-left: 10px; } × .bar { margin-right: -10px; margin-left: -10px; padding-right: -10px; padding-left: 10px; } Indent multiline selectors [61] X .class1, .class2, .class3, .class4 { font-size: 80%; } .otherClass { font-size: 2em; } Rulesets in @media should be indented [44, 42, 60] × no indentation Comments should be indented with the thing they describe [42, 56, 60] X /* a fix */ color: red !important; × /* a fix */ color: red !important; Place comments on a new line [58, 48] X /* a fix */ color: red !important; × /* a fix */ color: red !important; Add comments after a space after the last ; [62] X height: 100%; margin-bottom: 1px; /* scrollbars! */ Add one blank line between adjacent rulesets [43, 44, 45, 58, 46, 47, 59, 50, 52, 54, 56] × no blank lines between rulesets × two or more blank lines Single-line rules may take adjacent lines [58, 59, 60] × multiple single-line rules per line ? one line between single-line rulesets × two or more lines between rulesets Values should be on same line as names [58, 59] X margin: 0px 20px 0px 10px; × margin: 0px 20px 0px 10px; Values should not appear on one line [62] × margin: 0px 20px 0px 10px; X margin: 0px 20px 0px 10px; No space before colons [45, 42, 63, 54, 55, 60] X color: red; × color : red; Put one space after colons [43, 44, 45, 58, 46, 42, 47, 59, 48, 64, 52, 53, 54, 55, 56, 60, 65, 57] × color: red; X color: red; × color:red; Put no spaces after colons [63] X color:red; × color: red; Put one space between the last selector and the block [43, 44, 58, 46, 42, 47, 59, 48, 49, 50, 52, 53, 54, 65, 57] × a{color:blue;} X a {color:blue;} × a {color:blue;} Opening brace must be on the same line as the last selector [45, 48, 64, 52, 54, 55] X a{color:blue;} X a {color:blue;} × a {color:blue;} Put the first declaration on a newline after the opening curly brace [59, 52, 54, 55] × a{color:blue;} × a {color:blue;} X a {color:blue;} × a

{color:blue; } Require newline before a declaration [62] × multiple declarations per line Put exactly one selector per line [44, 45, 58, 46, 42, 47, 59, 50, 53, 54, 55, 56] X h1 {...} × h1, h2 {...} X h1, h2 {...} × h1,

h2 {...} Put every declaration on a new line [44, 45, 58, 42, 47, 59, 48, 49, 50, 52, 53, 55, 56, 57] X margin-left:10px; margin-right:10px; × margin-left:10px; margin-right:10px; Closing brace on a new line [42, 47, 59, 52, 53, 55] X a { color: blue; } × a { color: blue;} ? a { color: blue; } Short one-liners are allowed [61, 58, 47, 59, 50, 53] X a { color: blue; } No space after the ( of functions [44, 42, 60] X rgb(100, 100, 100); × rgb( 100, 100, 100); No space before the ) of functions [44, 42, 60] X rgb(100, 100, 100); × rgb(100, 100, 100 ); Use spaces in CSV lists [44, 58, 42, 49, 52, 53, 60] X rgb(100, 100, 100); × rgb(100,100,100); Do not use spaces in CSV lists [53] × rgb(100, 100, 100); X rgb(100,100,100); Use newlines to break long values [44, 42] X esp. applicable to box-shadow, text-shadow, ... One space separates media feature & value [42] × @media screen and (min-width:10rem) X @media screen and (min-width: 10rem) × @media screen and (min-width: 10rem) All files should end with a single blank line [42]

Positioning and sorting

Style sheet starts with comment [44, 59, 50, 63, 54, 62] X the first element of the file is a comment Group related properties [44, 42, 46, 50, 58, 60] X .bar { margin: 15px; padding: 5px; color: red; font-weight: bolder; } × .bar { margin: 15px; color: red; padding: 5px; font-weight: bolder; } In multiselectors, order the selectors by type: HTML, HTML groupings, classes, IDs [62] X p, div span, .c, #t {color:red;} Order dimensions from outer to inner [62] X padding:0;width:5px;height:5px;margin:0 X padding:0;height:5px;width:5px;margin:0 Order alignments from outer to inner [62] X position:absolute; float:none; overflow:auto; vertical-align:text-top; text-align:center; direction:ltr; text-indent:1em; white-space:nowrap; Sort declarations by alphabet [47, 59, 46, 53, 54, 55] X vendor-specific prefixes can be ignored for sorting Sort declarations by alphabet within group [42] X typical groups: display, positioning, box model, colours, typography, other Sort vendor-prefixed properties by alphabet [46] X obviously applies when several are present Order vendor-prefixed values by version [45] X /* Safari 4, Chrome 2, iOS 2 */ background-image: -webkit-gradient(...); /* Safari 5.1+, Chrome 10+, iOS 5 */ background-image: -webkit-linear-gradient(...); Use TRBL order for boxing [44, 42, 46, 50] X shorthands of margin and padding use top-right-bottom-left order, and it should be used in freehand declarations as well. Use TL/TR/BR/BL for corner specifiers [44] X especially applicable to border-radius*-* Keep @media rules at the bottom of the sheet [44] X it is also acceptable to not have at-rules Disallow duplicate properties (rule 1) [66] × border: 1px solid black; border: 1px solid black; Disallow duplicate properties (rule 2) [66] × border: 1px solid black; border: 1px solid red;

Syntax

Put a semicolon at the end of each declaration [43, 67, 44, 45, 58, 46, 42, 59, 49, 50, 64, 52, 53, 55, 56, 60, 65] X .c { color: red;font-size:larger;} × .c { color: red;font-size:larger} Use em instead of px [43, 56] X font-size: 12px; × font-size: 1em; Use px instead of pt [62] X font-size: 12pt; × font-size: 12pt; No @charset statements in external sheets [42] × @charset "UTF-8"; Omit the protocol from embedded resources [46] X url(//www.google.com/images/example) × url(http://www.google.com/images/example) Disallow empty rules [68] × .myclass { } × .myclass { /* Nothing to see here */ } Disallow the star hack [69] × *width: 100px; Disallow the underscore hack [69] × _width: 100px; Strings must use double quotes [58, 42, 44, 52, 60, 57] X font-family: "Arial Black" × font-family: 'Arial Black' Use single quotes for attrs [46, 58, 42, 44, 49, 53, 60] × span[class=example] {...} X span[class='example'] {...} × span[class="example"] {...} Use double quotation marks for charsets [46] X @charset "UTF-8"; × @charset 'UTF-8'; Do not use pt or rem [56] × font-size: 10pt; X font-size: 1em; × font-size: 1.5rem; Use single quotes in values [46, 52] X font-family: 'Verdana'; × font-family: "Verdana"; Double quote font names with spaces [44, 62] × font-family: Arial Black; X font-family: "Arial Black"; × font-family: 'Arial Black'; Do not put quotes in URIs [46, 42, 45, 57] X @import url(maia.css); × @import url('maia.css'); × @import url("maia.css"); Use single quotes in URIs [62] × @import url(vala.css); X @import url('vala.css'); × @import url("vala.css"); Use hex or rgba() for colors [47, 44] X color: #F00; × color: red; X color: rgba(50, 100, 150, 1.0); × color: rgb(50, 100, 150); × color: hsl(10, 100, 250); × color: hsla(10, 100, 250, 0.5); Use rgba only when opacity is needed [47, 44] X background-color: rgba(255, 0, 0, 0.5); × background-color: rgba(255, 0, 0, 1); X background-color: rgb(255, 0, 0); Use short hexadecimal values [44, 58, 46, 42, 65, 57] X color: #E9E9E9; × color: #99EE11; X color: #111; × color: #111111; No units for zeros [44, 58, 46, 42, 47, 69, 52, 53, 56, 60, 65] X .box { margin-top: 0; } × .box { margin-top: 0px; } × .box { margin-top: 0%; } Use px for font-size [47, 51] X font-size: 12pt; × font-size: 1.5em; × font-size: 2.54rem; × font-size: 3.14cm; Line height should not use units [47, 44, 51] X line-length: 1; × line-length: 1.5pt; × line-length: 0.01cm; Use a leading zero for decimal values [44, 46, 53] X .box { font-size: 0.8em; } × .box { font-size: .8em; } X p { text-indent: -0.8em; } × p { text-indent: -.8em; } Values in media queries should use rem [42] X @media screen and (min-width: 20rem) × @media screen and (min-width: 450px) Presentation words in selectors [43, 49, 64, 51, 70] × .blue { ... } × #text-gray { ... } × .light-box { ... } Do not abbreviate [43, 70, 56] X .production { ... } × .prod { ... } X #text { ... } × #txt { ... } ID and class names must be dash-separated lowercase [43, 44, 46, 45, 59, 48, 49, 52, 53, 70, 56, 57] X .prod { ... } × .Prod { ... } X #text-case { ... } × #textCase { ... } ID/class names must be lowercase [43, 46, 50, 64, 52] X .prodrule { ... } × .ProdRule { ... } X #textcase { ... } × #text-case { ... } Properties should be lowercase [44, 46, 56] X color: red; × Color: red; X margin: 10px; × MARGIN: 10px; X -MOZ-border-radius: 5px; HTML elements are lowercase [44, 46, 58, 50, 52, 56] X h1 { ... }; × H1 { ... }; Attributes are lowercase [44, 46, 58, 50] X div[prop] { ... }; × div[PROP] { ... }; Attributes values are lowercase [44, 46, 58, 50] X img[alt="icon"] { ... }; × img[alt="ICON"] { ... }; Non-string values must be lowercase [44, 46, 58, 50] X color: red; × color: RED; X margin-top: 3px; × margin-top: 3PX; X font-family: "Courier New", courier; Hexadecimals are lowercase [42, 49, 58, 53, 56, 60, 65] X color: #fff; × color: #FFF; All except comments should be lowercase [62] X color: #fff; × color: #FFF; X .prodrule[attr] { ... } × .ProdRule[ATTR] { ... } X color: red; × color: RED; X font-family: "courier new", courier; × font-family: "Courier New", courier; ID/class names must be camelCase [61, 51, 52] X .prodRule { ... } × .Prod-rule { ... } X #textCase { ... } × #TEXTCASE { ... } Avoid using attributes in selector names [61] × .red { color: red; } × .center { text-align: center; } Forbid specific words in ID and class names [61] × .box-top { color: red; } × .head-menu { color: red; } × .left-notice { color: red; } IDs & classes should be shorter than 20 chars [62] × .table-of-contents-and-figures {...} Almost all colors should be in hex [62] X color: white; X color: black; X color: transparent; × color: red; X color: #ffdec9; A class and an ID cannot share a name [62] × no document should contain both .x and #x Multiselectors must have 4− selectors [45] X h1 { color:red;} X h1,h2 { color:red;} X h1,h2,h3 { color:red;} X h1,h2,h3,h4 { color:red;} × h1,h2,h3,h4,h5 { color:red;} × h1,h2,h3,h4,h5,h6 { color:red;} Selectors must have 4− simple selectors [45] X h1 { color:red;} X div h1 { color:red;} X div.main h1 { color:red;} X div.main h1.cool { color:red;} × div.main[style] h1.cool { color:red;} × div.main[style] h1.cool #a { color:red;}

Style

Avoid using z-indexes when possible [45] × z-index: 100; Avoid using !important [45, 55] × color: red !important; Do not use ID selectors [71, 61, 72, 63, 56] × #header a {...} Disallow @import [73, 61, 51, 53] × @import url(foo.css); Zero or one ID selectors per rule declaration [47] × #header .search #quicksearch { ... } ? #header, #footer { ... } Use px units as a safe fallback for rem units [42] X font-size: 24px; font-size: 1.5rem; × font-size: 1.5rem; Beware of box model size (rule 1) [71] X width: 100px; border: 1px; box-sizing: border-box; × width: 100px; border: 1px; × width: 100px; padding: 1px; Beware of box model size (rule 2) [71] X height: 100px; border: 1px; box-sizing: border-box; × height: 100px; border: 1px; × height: 100px; padding: 1px; Require properties for display (rule 1) [74] × display:inline; width:25px; × display:inline; height:25px; × display:inline; margin:10px; × display:inline; float:left; Require properties for display (rule 2) [74] × display:inline-block; float:left; Require properties for display (rule 3) [74] × display:block;vertical-align:text-top; Require properties for display (rule 4) [74] × display: table-cell; margin: 10px; Disallow adjoining classes [69] X .foo .bar {color: red;} × .foo.bar {color: red;} Disallow the box-sizing property [69] × .mybox {box-sizing: border-box;} Require compatible vendor prefixes [69, 58, 42, 56] X -moz-transform: translate(50px, 100px); -o-transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); transform: translate(50px, 100px); × transform: translate(50px, 100px); Disallow negative indent [69] X direction:rtl; text-indent:-9em; × text-indent:-9em; Require standard property (no prefix) [69, 56] X -moz-transform: translate(50px, 100px); -o-transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); transform: translate(50px, 100px); × -moz-transform: translate(50px, 100px); Require a fallback color [69, 56] X color:gray; color:rgba(100,200,100,0.5); × color:rgba(100,200,100,0.5); Bulletproof font face [69, 51] × @font-face {src: url('webfont.eot');} Do not use too many web fonts [69] × more than five @font-face declarations Disallow regex-looking selectors [69, 53] X .mybox[class]{ color: red; } X .mybox[class=xxx]{ color: red; } × .mybox[class~=xxx]{ color: red; } × .mybox[class^=xxx]{ color: red; } × .mybox[class|=xxx]{ color: red; } × .mybox[class$=xxx]{ color: red; } × .mybox[class*=xxx]{ color: red; } Disallow the universal selector [69, 51] × * { color: red; } X .selected * a { color: red; } × .selected * { color: red; } Disallow unqualified attribute selectors [69] × .myclass[type=text] { color: red; } X .selected [type=text] a { color: red; } × .selected [type=text] { color: red; } Disallow overqualification [69, 51, 72, 53, 57, 44, 67] X p.active {...} li.active {...} × li.active {...} No combos of ID/classes with types [46, 44, 56, 67] X .error {} × div.error {} X #example {} × ul#example {} Disallow duplicate background images [69] × .heart {background: url(sprite.png) 0 0 no-repeat;} .task {background: url(sprite.png) 0 0 no-repeat;} Disallow too many floats [69] × more than 10 declarations with float property Do not use too many font size declarations [69] × more than 10 declarations of font-size Disallow outline:none (rule 1) [69] X a:focus { outline:none; } × a { outline:none; } X a:focus { outline: 0; } × a { outline: 0; }1 Disallow outline:none (rule 2) [69] X a:focus { outline:none; } × a { outline:none; } X a:focus { outline: 0; } × a { outline: 0; } × a:focus p { outline: 0; } × a:focus, p { outline: 0; } Disallow qualified headings [69] X h3 {font-weight: normal;} × .box h3 {font-weight: normal;} Headings should only be defined once [69] X h3 {font-weight: normal;} × h3 {font-weight: normal;} .box h3 {font-weight: bold;} X h3 {font-weight: normal;} h3:hover {font-weight: bold;} Require fallback on gradient backgrounds [45] X background-color:#555; background-image: linear-gradient(top,#111,#999); × background-image: linear-gradient(top,#111,#999); Use the most specific category possible [67, 53] × .item[folder] > treerow > treecell {…} Avoid the descendant selector [67, 44] X treehead > treerow > treecell {...} × treehead treerow treecell {...} No child selector with tag category rules [67] × treehead > treerow > treecell {...} Question all usages of the child selector [67, 44] × div > .sect {...} Avoid vendor-specificity unless necessary [67] × -webkit-border-radius: 1px; × -moz-border-radius: 10px; No shorthand properties but border [43, 48, 53, 62] X border: 1px solid black;

1 Note that the implementation provided by CSS Lint takes into consideration the presence of the :focus pseudo selector anywhere in the selector. Thus, a rule a:focus p { outline:0; } does not yield a warning, and neither does a:focus, p { outline:0; }, which is obviously wrong, hence the following rule. × background: red url(bg.jpg) no-repeat; × font: 15px arial, sans-serif; × list-style: square outside; × margin: 2cm 3cm 4cm 5cm; × padding: 2cm 3cm 4cm 5cm; × transition: transition: width 2s; No shorthand properties except background [62] × border: 1px solid black; X background: red url(bg.jpg) no-repeat; × font: 15px arial, sans-serif; × list-style: square outside; × margin: 2cm 3cm 4cm 5cm; × padding: 2cm 3cm 4cm 5cm; × transition: transition: width 2s; No shorthand properties except list-style [62] × border: 1px solid black; × background: red url(bg.jpg) no-repeat; × font: 15px arial, sans-serif; X list-style: square url(sq.png); × margin: 2cm 3cm 4cm 5cm; × padding: 2cm 3cm 4cm 5cm; × transition: transition: width 2s; Use shorthand margin [44, 46, 69, 56, 65, 57] X margin: 10px 15px 25px 15px; × margin-top: 10px; margin-bottom: 25px; margin-left: 15px; margin-right: 15px; Use shorthand padding [44, 46, 69, 56, 65, 57] X padding: 1px 2px 3px 5px; × padding-top: 1px; padding-bottom: 3px; padding-left: 2px; padding-right: 5px; Use shorthand border [44, 46, 56, 65, 57] X border: 1px 2px 3px 5px solid black; × border-top: 1px; border-bottom: 3px; border-left: 2px; border-right: 5px; border-color:red; border-style:solid; Use the shorthand font property [44, 46, 56, 65, 57] X .x {font: Fantasy 9em;} × .x{font-size:9em; font-family:Fantasy;} Use the list-style shorthand [44, 46, 56, 65, 57] X ul { list-style: square inside; } × ul { list-style-type: square; list-style-position: inside; } No js- prefixed names in CSS files [47, 53] X The js- prefix is exclusively for JS files X Use the is- prefix for CSS/JS shared state rules Forbid using border to set the border color [62] × border: 5px solid red; Forbid using background to set the color [62] × background: red url(bg.jpg) no-repeat; Always set full border value [62] X border: 1px solid black; × border: 1px; Shorthands are for when all sides are equal [62] X padding: 0px; × padding: 1px 0px 2px 0px; ? padding: 2px 5px;

References

[42] Drupal. CSS Coding Standards. https://www.drupal.org/node/1886770. [43] Stoyan Stefanov. CSS coding conventions. 2005. [44] Wordpress. CSS Coding Standards. https://make.wordpress.org/core/ handbook/coding-standards/css/. [45] MediaWiki. Manual:Coding conventions/CSS. [46] Elliot Glaysher. HTML/CSS Style Guide. https : / / google - styleguide.googlecode.com/svn/trunk/htmlcssguide.xml. [47] GitHub. Guidelines — Primer. http://primercss.io/guidelines/. [48] AlexMA. CSS Coding Conventions. [49] Simon Sheppard. CSS Naming convention. [50] Chris Bracco. CSS Conventions. 2015. [51] Isobar. Front-end Code Standards. [52] John Catterfeld. Code Style Guide: CSS. [53] Mark Otto. Code Guide. [54] Tyler Nielsen. Coding standards: HTML/CSS. 2013. [55] Benjamin Toll. Code Conventions for Cascading Style Sheets. [56] Moodle. CSS coding style. [57] CKAN. CSS coding standards. 2013. [58] Nicolas Gallagher. Principles of writing consistent, idiomatic CSS. [59] Harry Roberts. css guide:lines; [60] Backdrop CMS API. CSS Coding Standards. [61] Realdeal. CSS Naming Conventions and Coding Style. 2008. [62] Michel Bagnol. CSS Coding Style Conventions. 2009. [63] Harry Roberts. My HTML/CSS coding style. [64] Morshed Alam. CSS coding guidelines/conventions. 2010. [65] Shay Howe. Writing Your Best Code. 2015. [66] Nicholas C. Zakas. Disallow duplicate properties. [67] David Hyatt. Guidelines for Efficient .CSS https://developer.mozilla. org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS. 2000. [68] Nicholas C. Zakas. Disallow empty rules. [69] Nicholas C. Zakas. CSS Lint Rules. [70] Apppie. Naming Convention. [71] Nicholas C. Zakas. Disallow IDs in selectors. [72] Mark Macdonald et al. Orion Coding conventions: CSS. 2014. [73] Nicholas C. Zakas. Disallow import. [74] Nicholas C. Zakas. Require properties appropriate for display.