Writing beautiful, understandable code is just as important as writing a production code. There are many different guides and guidelines on the Internet. I tried to go through all of them and put together a little cheat sheet. I have included only those rules that affect the style of the code and cover most of the key points. Hope you find this useful! Overall Always use HTTPS (https:) for images and other media files, style sheets, and scripts, unless the respective files are not available over HTTPS. Use HTTPS for embedded resources where possible. Specify the encoding in HTML templates and documents via <meta charset="utf-8">. Do not specify the encoding of style sheets as these assume UTF-8. Use UTF-8 (no BOM). HTML Style Rules HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html>. Use HTML5. The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. Never Skip the <title> Element. You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers. Add the lang Attribute. For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access. For images, that means the use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available. Provide alternative content for multimedia. This reduces flickering because the browser can reserve space for the image before loading. Always define the width and height of images. Specifying type attributes in these contexts is not necessary as HTML5 implies text/CSS and text/javascript as defaults. This can be safely done even for older browsers. Omit type attributes for style sheets and scripts. Close All HTML Elements Bad example: Test This is only a test. This is a paragraph. This is a paragraph. < = > script src "http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" </ > script < > title </ > title < > article < = > img src "html5.gif" < = = = > link rel "stylesheet" href "https://www.google.com/css/maia.css" type "text/css" < > section < > p < > p </ > section Good example: Test This is only a test. This is a paragraph. This is a paragraph. <!DOCTYPE html> < = > html lang "en-us" < > head < = > meta charset "utf-8" < > title </ > title < > head < > body < = > script src "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" </ > script < = = > link rel "stylesheet" href "https://www.google.com/css/maia.css" < > article </ > article < = = = > img src "html5.gif" alt "HTML5" style "width:128px;height:128px" < > section < > p </ > p < > p </ > p </ > section </ > body </ > html HTML Formatting Rules Don’t use tabs or mix tabs and spaces for indentation. Indent by 2 spaces at a time. Nested elements should be indented once (two spaces). All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings). Use only lowercase. Trailing white spaces are unnecessary and can complicate diffs. Remove trailing white spaces. Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line. Use a new line for every block, list, or table element, and indent every such child element. Use double ("") rather than single quotation marks ('') around attribute values. When quoting attribute values, use double quotation marks. Bad example: Home Sign in Fantastic Great < = > A HREF "/" </ > A < = > a class 'maia-button maia-button-secondary' </ > a < > ul < > li < > li </ > ul Good example: Fantastic Great < = = > img src "google.png" alt "Google" < > ul < > li </ > li < > li </ > li </ > ul CSS Style Rules Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in question, or that are otherwise generic. Use meaningful or generic ID and class names. Try to convey what an ID or class is about while being as brief as possible. Use ID and class names that are as short as possible but as long as necessary. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes. Avoid qualifying ID and class names with type selectors. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. Separate words in ID and class names by a hyphen. CSS offers a variety of shorthand properties (like font) that should be used whenever possible, even in cases where only one value is explicitly set. Use shorthand properties where possible. Do not use units after 0 values unless they are required. Omit unit specification after “0” values, unless required. Do not put 0s in front of values or lengths between -1 and 1. Omit leading “0”s in values. For color values that permit it, 3 character hexadecimal notation is shorter and more succinct. Use 3 character hexadecimal notation where possible. Prefer line comments to block comments. Avoid end-of-line comments. Prefer comments on their own line. Bad example: { : ; : ; : ; : ; } { : } /* Not recommended: meaningless */ #yee-1901 padding-bottom 2em padding-left 1em padding-right 1em padding-top 0em /* Not recommended: does not separate the words “demo” and “image” */ .demoimage color #ffffff Good example: { : ; } { : . ; } { : } /* Recommended: specific */ #gallery padding 0 1em 2em #login font-size 8em .demo-image color #fff CSS Formatting Rules Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain. Alphabetize declarations. Use soft tabs (2 spaces) for indentation. Indent all block content, that is rules within rules as well as declarations, so to reflect hierarchy and improve understanding. Indent all block content. End every declaration with a semicolon for consistency and extensibility reasons. Use a semicolon after every declaration. Always use a single space between property and value (but no space between property and colon) for consistency reasons. Use a space after a property name’s colon. Always use a single space between the last selector and the opening brace that begins the declaration block. Use a space between the last selector and the declaration block. Always start a new line for each selector and declaration. Separate selectors and declarations by new lines. Always put a blank line (two line breaks) between rules. Separate rules by new lines. Use single ('') rather than double ("") quotation marks for attribute selectors and property values. Bad example: { :block; : } , { : relative; : } { : , arial, sans-serif;} .test display height 100px a :focus a :active position top 1px html font-family "open sans" Good example: { : , arial, sans-serif; } , , { : normal; : ; } { : fuchsia; : solid; : ; : ; : ; : blue; } html font-family 'open sans' h1 h2 h3 font-weight line-height 1.2 .example background border 1px -moz-border-radius 4px -webkit-border-radius 4px border-radius 4px color Useful links: Google HTML/CSS Style Guide w3schools HTML Style Guide and Coding Conventions Airbnb CSS / Sass Styleguide HTML CSS Code Guide by @mdo. P.S. Thanks for reading! More articles: Top Lesser Known HTML 5 & CSS 3 Tips and Best Practices Top 12 Lesser Known Tips for JavaScript Best Practices
