Embed Size (px)
Citation preview
Supplements for“Language Design and Implementationfor 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 togeneral link to wikipedia.orggeneral link to wikipedia.org
1 Java link to oracle.com2 Java link to oracle.com3 Basic link to xoc.net4 C# link to microsoft.com5 Matlab link to columbia.edu6 JS link to javascript.crockford.com7 JS link to sideeffect.kr8 Java link to sideeffect.kr9 Python link to sideeffect.kr
10 Scala link to sideeffect.kr11 Ruby link to sideeffect.kr12 C# link to sideeffect.kr13 PHP link to sideeffect.kr14 C/C++ link to gcc.gnu.org15 PHP link to mediawiki.org16 PHP link to cakephp.org17 Java link to source.android.com
general link to c2.com18 PHP link to wordpress.org
19 HTML link to wordpress.org20 CSS link to wordpress.org21 JS link to wordpress.org
data link to nisra.gov.uk22 C/C++ link to cs.rice.edu23 C/C++ link to llvm.org24 PHP link to drupal.org
data link to nisra.gov.uk25 JS link to aviyehuda.com26 PHP link to stackoverflow.com27 Java link to stackoverflow.com28 Java link to stackoverflow.com29 C# link to stackoverflow.com
data link to unspsc.orggeneral link to articlesontesting.com
30 SQL link to articlesontesting.com31 JS link to gist.github.com32 JS link to npmjs.com33 C# link to stackexchange.com
hardware link to dasplace.net34 C/C++ link to google.github.io
out of scope link to sourceforge.net35 Fortran link to fortran.com
out of scope link to teslamotorsclub.com36 C/C++ link to research.microsoft.com37 C/C++ link to codemuri.tistory.com38 Fortran link to water.usgs.gov39 Lisp link to cliki.net40 Stat link to dell.com
out of scope link to stniccc.com41 Java link to quora.com42 C/C++ link to codemuri.tistory.com43 HTML link to gitbook.com44 CSS link to gitbook.com45 JS link to gitbook.com
out of scope link to gofundme.comdata link to medicaidalaska.com
out of scope link to demozoo.org46 C/C++ link to aliweb.cern.ch47 Java link to slideshare.net48 C/C++ link to sbin.org
data link to collaboratemd.com49 C/C++ link to fnal.gov50 Python link to python.org51 C/C++ link to freertos.org
52 C# link to worknet.googlecode.com53 C/C++ link to image.diku.dk54 Fortran link to cesm.ucar.edu
data link to provcomm.ibx.com55 ObjC link to developer.apple.com56 ML link to it.uu.se57 Java link to researchgate.net58 C/C++ link to unrealengine.com
data link to aace.comdata link to lewisham.gov.uk
hardware link to comprion.com59 C# link to dotnetfunda.com60 Paradox link to prestwood.com61 Java link to mindprod.com
duplicate link to hashnode.comhardware link to quizlet.com
62 Java link to geosoft.no63 Flex link to infoq.com
duplicate link to elsevier.com64 C/C++ link to cws.cengage.co.uk
out of scope link to eventbrite.deout of scope link to eventbrite.co.uk
65 C/C++ link to hackaday.com66 C/C++ link to pjsip.org
visual link to serverfault.com67 R link to r-bloggers.com
general link to carlopescio.com68 ObjC link to corgitoergosum.net
data link to fortherecordmag.com69 Rust link to rust-lang.org70 C/C++ link to softwareprojects.com71 PHP link to softwareprojects.com72 PHP link to exakat.io73 Java link to apache.org74 C/C++ link to software-dl.ti.com
data link to help.pointforce.comgeneral link to drdobbs.com
75 PHP link to osticket.com76 PHP link to slideshare.net77 C/C++ link to geeks3d.com
duplicate link to cern.ch78 C/C++ link to wireshark.org79 ASP .NET link to visualstudiomagazine.com80 C/C++ link to ludumdare.com81 C/C++ link to scribd.com
data link to erm-crm.org82 Java link to prezi.com
data link to books.google.com83 ObjC link to groups.google.com
data link to zxdemo.orgout of scope link to djangocon.eu
84 C/C++ link to joelonsoftware.comdata link to medicaidalaska.com
85 HTML link to navercorp.com86 CSS link to navercorp.com87 Java link to arxiv.org88 Ruby link to rorlab.gitbooks.io89 C/C++ link to pjsip.org90 Fortran link to worldcat.org
data link to amerihealth.comdata link to fresh.unh.edudata link to books.google.com
general link to polleverywhere.com91 PHP link to codeigniter.com
data link to atari-forum.com92 C/C++ link to cprogramming.com93 Java link to geotools.org
hardware link to tomshardware.com94 C/C++ link to google-melange.com95 C/C++ link to tizen.org96 XAML link to dotnetapp.com97 C/C++ link to nanapro.org98 Python link to bigbrotherbot.net99 C/C++ link to rtems.org
100 Java link to liferay.com
Appendix B. Claim 2 Dataset
Language Results Privatelee querySQL 75102 “coding+convention”+sqlPerl 52801 “coding+convention”+perlFortran 34701 “coding+convention”+fortranCSS 33602 “coding+convention”+AND+%28css+OR+cascading+style+sheets%29HTML 29402 “coding+convention”+htmlVB 25301 “coding+convention”+vbJava 24702 “coding+convention”+javaPHP 19702 “coding+convention”+phpC++ 17302 “coding+convention”+c%2B%2BJS 16802 “coding+convention”+javascriptbash 13100 “coding+convention”+bashObjC 11901 “coding+convention”+AND+%28swift+OR+objective+c%29Python 11302 “coding+convention”+pythonMatlab 11300 “coding+convention”+matlabC# 10801 “coding+convention”+c#Abap 9940 “coding+convention”+abapScala 9110 “coding+convention”+scalaLisp 6011 “coding+convention”+lispGroovy 5910 “coding+convention”+groovyRuby 5141 “coding+convention”+rubyAda 5110 “coding+convention”+adaCobol 3770 “coding+convention”+cobolLua 3420 “coding+convention”+luaDart 2860 “coding+convention”+dartProlog 2290 “coding+convention”+prologRust 1270 “coding+convention”+rustpotato 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 reviewedjournal, magazine or proceedings volume.
References
[1] César F. Acebal, Bert Bos, María Rodríguez, and Juan Manuel CuevaLovelle. “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 12thInternational 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, andBernady 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 NinthInternational Conference on Web Engineering (ICWE). Ed. by MartinGaedke, 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 Methodby Using Tag and CSS Attribute Setting”. In: Proceedings of the TenthInternational 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 byRearranging the Contents of CSS Files”. In: Proceedings of the Ninth In-ternational Conference on Intelligent Information Hiding and MultimediaSignal Processing (IIH-MSP). Ed. by Kebin Jia, Jeng-Shyang Pan, YaoZhao, 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-FrancineMoens. “The Downside of Markup: Examining the Harmful Effects of CSSand Javascript on Indexing Today’s Web”. In: Proceedings of the 21stACM 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 CSSComponents in an XML Browser”. In: Proceedings of the InternationalConference 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 CascadingStyle Sheets”. In: Proceedings of the 26th annual ACM symposium on UserInterface 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 InformationSystems 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 Refactoringfor Size Reduction of CSS Style Sheets”. In: ACM Symposium on DocumentEngineering (DocEng). ACM, 2014, pp. 13–16. doi: 10.1145/2644866.2644885.
[12] Davood Mazinanian, Nikolaos Tsantalis, and Ali Mesbah. “DiscoveringRefactoring Opportunities in Cascading Style Sheets”. In: Proceedings ofthe 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 ofCascading 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: Transcodingbased on CSS”. In: Proceedings of the Eighth International ACM SIGAC-CESS Conference on Computers and Accessibility (ASSETS). Ed. bySimeon Keates and Simon Harper. ACM, 2006, pp. 259–260. doi: 10.1145/1168987.1169044.
[15] Henrik Stormer. “Personalized Websites for Mobile Devices using DynamicCascading Style Sheets”. In: IJWIS 1.2 (2005), pp. 83–88. doi: 10.1108/17440080580000085.
[16] Misko Hevery and Adam Abrons. “Declarative Web-Applications withoutServer: Demonstration of How a Fully Functional Web-Application CanBe 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 HTMLand CSS”. In: Proceedings of the 16th International Conference on WorldWide Web (WWW). Ed. by Carey L. Williamson, Mary Ellen Zurko, PeterF. 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 the17th 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 CesarAugusto Cusin. “CSS Browser Selector Plus: A JavaScript Library to Sup-port Cross-browser Responsive Design”. In: Companion Volume of the 22ndInternational 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: ANovel 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, andWolfgang Nejdl. ACM, 2009, pp. 1161–1162. doi: 10.1145/1526709.1526907.
[21] Matthias Keller and Martin Nussbaumer. “CSS Code Quality: A Metricfor 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 FernandoBrito e Abreu, João Pascoal Faria, and Ricardo Jorge Machado. IEEEComputer 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: Proceedingsof 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: ACMTransactions on the Web 10.1 (2016), p. 1. doi: 10.1145/2818377.
[24] Davood Mazinanian and Nikolaos Tsantalis. “An Empirical Study on theUse 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 Rulesto Support Style Maintenance”. In: Proceedings of the 34th InternationalConference 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 HTMLand 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 ResearchConference (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 CompoundDocuments”. 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íoSuárez Gracia. “Automatic Discovery of Performance and Energy Pit-falls in HTML and CSS”. In: Proceedings of the International Symposiumon 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 StyleSheets”. 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 InternationalConference 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 UsingHTML, 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 andCSS”. 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 Modelfor Declarative 3D”. In: Proceedings of the 20th International Conferenceon 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 MykolaPechenizkiy. “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/CSSScene-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. “WebBrowser Fingerprinting Using Only Cascading Style Sheets”. In: Proceed-ings of the 10th International Conference on Broadband and WirelessComputing, Communication and Applications (BWCCA). Ed. by LeonardBarolli, Fatos Xhafa, Marek R. Ogiela, and Lidia Ogiela. IEEE ComputerSociety, 2015, pp. 57–63. doi: 10.1109/BWCCA.2015.105.
[41] Jesia Zakraoui and Wolfgang L. Zagler. “A Method for Generating CSSto Improve Web Accessibility for Old Users”. In: Proceedings of the 13thInternational Conference on Computers Helping People with Special Needs(ICCHP), Part I. Ed. by Klaus Miesenberger, Arthur I. Karshmer, PetrPená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-specificlanguage. An overview of the abstract syntax will be followed by detailed viewsof each of the subclasses.
ConventionSet represents a style guide. It comprises a number of conventionsthat form coherent guidelines. Attribute contexts is a list of Contexts thatcontains contexts.
Context represents a group of conventions that belong to the same semanticgroup (e.g. whitespacing, syntax preference, programming style). Attributeconventions is a list of Conventions that contains conventions. Attributeignored_patterns is a list of Patterns that are ignored while searching forthe target pattern. For example, while searching for violations of semanticconventions, the whitespacing and indentation nodes are ignored.
Convention represents a rule that enforces specific constraints. Attribute pat-tern is the pattern that the convention targets. Attribute description is thedescription of the convention in natural text. This description is displayedto the user when a violation of the convention is discovered.
PatternDescriptor represents a description of a node or a combination ofrelated nodes that a given convention constraints. Attribute root is the topnode described in the pattern. Attribute nodes is a collection of all nodesdescribed by the pattern. Attribute relations is a collection of relationshipsbetween 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 CssNode. Attribute constraint is an expression that designates the constraintsapplied to the node.
Node represents a description of a node used in a PatternDescriptor. Attributeconstraint is an expression that designates constraints applied to the node.
Attribute identifier is a given string that can be used as a reference to thematched node.
WhitespaceNode represents a description of a whitespace node that refer-ences space, newline, indentation symbols. Attribute constraint is an ex-pression that designates constraints applied to the node. Attribute repeateris an optional constraint that specifies the number of times a whitespacenode can appear consecutively. Repeaters are useful to express conventionsthat do not specify exact quantities of whitespace symbols. For example, theconvention “put at least one blank line between rules” sets a lower limit ofthe number of blank lines, but not an upper limit.
Now a detailed view of the expressions in the abstract syntax of CssCoco willbe followed by a description of the subclasses of Expression:
LiteralExpr represents an expression containing a literal value. Attributevalue is the value of the literal expression.
VariableExpr represents a reference to a matched node. Attribute name is theidentifier used to reference the node.
UnaryExpr represents expressions with a single operand. Attribute operandis 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 valueis the name of the API property or method that is invoked.
NodeQueryExpr represents expression that queries node context. Attributeoperand is the node used as a reference point for the query.
The next diagram presents a detailed view of the literal expressions used inthe 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 syntaxof CssCoco, followed by a listing of the classes.
PropertyExpr represents an expression that returns the value of a propertyof the operand node. Attribute operand represents the node targeted by theexpression. Attribute value holds the name of the property that is accessed.
MethodExpr represents an expression that invokes a method of the operandnode. Attribute argument represents the argument passed to the invokedmethod.
Lastly, node query expressions:
NextSiblingExpr represents expression that returns the following sibling ofthe operand node.
PreviousSiblingExpr represents expression that returns the previous siblingof the operand node.
NodeQueryWithArgExpr represents expression that queries node contextand uses additional constraints for the query. Attribute argument representsthe additional constraints used by the query.
ContainsExpr represents an expression that checks whether the operand nodecontains a node that matches given constraints.
ContainsAllExpr represents an expression that checks whether the operandnode contains nodes that match given constraints.
CountExpr represents an expression that counts the number of ancestor nodesof the operand that match a given constraint.
BeforeExpr represents an expression that checks whether a given pattern ofnodes appears before the operand node.
AfterExpr represents an expression that checks whether a given pattern ofnodes appears after the operand node.
BetweenExpr represents an expression that checks whether a given patternof nodes appears between the two operand nodes.
Appendix E. Concrete Textual Syntax
This appendix contains the concrete syntax of the designed DSL. Below arepresented the grammar rules accompanied by the mapping to the abstract syntaxof the language.
stylesheet represents a style guide.Abstract Syntax Mapping: ast.ConventionSet.
stylesheet : context* ;
context represents a group of logically related conventions. A single styleguide can comprise a number of conventions that enforce various constraints,e.g. whitespacing, syntax preference, program style. Contexts group conventionsthat 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 typicallyexpressed by directly stating what is disallowed or describing a condition that ifmet, requires additional constraints. The former way of expressing conventions isrepresented by the forbid conventions. The latter approach uses the structurefind ... require .... To break down complex disallowing conventions, thestructure find ... forbid ... has been introduced. This aims at improvingreadability of conventions. Additionally, conventions have a where clause whichapplies constraints for matching nodes. It is used to expression matching con-straints that span over multiple nodes and therefore cannot be present in thenode 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 candescribe 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 ofthe 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 gluearithmetic and type expressions.
Abstract Syntax Mapping: ast.NotExpr, ast.AndExpr, ast.OrExpr andall 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 nodequeries on nodes. They are located in a separate parser rule because they inter-pret 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 regexexpressions. These are located in a separate parser rule because they interpretidentifiers 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 expres-sion.
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 twiceX contents of a @media rule can be indented twiceX 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 selectorof 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 indentationComments 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
20px0px
10px;Values should not appear on one line [62]
× margin: 0px 20px 0px 10px;X margin: 0px
20px0px
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:0X 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-rulesDisallow 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 thepresence of the :focus pseudo selector anywhere in the selector. Thus, a rulea: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 filesX 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.
