{"id":40761,"date":"2014-05-15T19:18:31","date_gmt":"2014-05-15T13:48:31","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=40761"},"modified":"2026-10-13T13:42:51","modified_gmt":"2026-10-13T08:12:51","slug":"code-better-with-google-html-css-style-guide","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/","title":{"rendered":"Code Better with the Google HTML\/CSS Style Guide (9 Rules)"},"content":{"rendered":"<p>Did you know Google publishes an HTML\/CSS Style Guide, the same rules its own developers follow? We all edit HTML and CSS on our blogs, but often without any consistent style. Following the Google HTML CSS style guide makes your code easier to read, faster to debug, and simpler for others (or future you) to maintain. I&#8217;ve been writing HTML and CSS for over two decades, and these are the rules from the guide I still use every day.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-63675\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide-1024x538.webp\" alt=\"Google HTML CSS style guide coding tips\" width=\"760\" height=\"399\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide-1024x538.webp 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide-300x158.webp 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide-150x79.webp 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide-768x403.webp 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/google-html-css-style-guide.webp 1200w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Google&#8217;s <a href=\"https:\/\/google.github.io\/styleguide\/htmlcssguide.html\" target=\"_blank\" rel=\"noopener\">HTML\/CSS Style Guide<\/a> recommends indenting by 2 spaces (no tabs), using lowercase everywhere, using HTTPS for embedded resources, using CSS shorthand, short hex colours, no units after zero, meaningful hyphenated class names, alphabetical declarations, and validating your code. Tools like Prettier and Stylelint can enforce most of these automatically.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae36bc971fd4\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae36bc971fd4\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Why_follow_a_style_guide\" >Why follow a style guide?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#9_coding_rules_from_the_Google_HTML_CSS_style_guide\" >9 coding rules from the Google HTML CSS style guide<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#1_Indent_by_2_spaces\" >1. Indent by 2 spaces<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#2_Use_only_lowercase\" >2. Use only lowercase<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#3_Use_3-character_hex_colours_where_possible\" >3. Use 3-character hex colours where possible<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#4_Use_CSS_shorthand\" >4. Use CSS shorthand<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#5_Dont_add_units_after_zero\" >5. Don&#8217;t add units after zero<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#6_Put_declarations_in_alphabetical_order\" >6. Put declarations in alphabetical order<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#7_Use_meaningful_hyphenated_class_names\" >7. Use meaningful, hyphenated class names<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#8_Use_HTTPS_and_valid_semantic_HTML\" >8. Use HTTPS and valid, semantic HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#9_Mark_to-dos_with_TODO\" >9. Mark to-dos with TODO<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Always_validate_your_code\" >Always validate your code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Let_tools_do_the_work\" >Let tools do the work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Does_Google_use_this_style_guide_for_rankings\" >Does Google use this style guide for rankings?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Should_I_use_tabs_or_spaces\" >Should I use tabs or spaces?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/05\/code-better-with-google-html-css-style-guide\/#Is_alphabetical_CSS_order_required\" >Is alphabetical CSS order required?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_follow_a_style_guide\"><\/span>Why follow a style guide?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Clean, consistent code isn&#8217;t just about looks. When every file follows the same rules, you can spot mistakes faster, compare changes easily, and pick up code you wrote years ago without confusion. Google keeps its <a href=\"https:\/\/google.github.io\/styleguide\/\" target=\"_blank\" rel=\"noopener\">style guides<\/a> on GitHub for HTML\/CSS, JavaScript, TypeScript, Python, Java, C++, Shell and more. The HTML\/CSS guide takes about ten minutes to read.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_coding_rules_from_the_Google_HTML_CSS_style_guide\"><\/span>9 coding rules from the Google HTML CSS style guide<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Indent_by_2_spaces\"><\/span>1. Indent by 2 spaces<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use two spaces per indent level, not tabs:<\/p>\n<pre><code>&lt;aside&gt;\r\n  &lt;div class=\"box\"&gt;\r\n    &lt;p&gt;It's all about style&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/aside&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"2_Use_only_lowercase\"><\/span>2. Use only lowercase<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Element names, attributes, selectors, properties and values (except strings) should all be lowercase:<\/p>\n<pre><code>color: #e5e5e5;   \/* not #E5E5E5 *\/<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"3_Use_3-character_hex_colours_where_possible\"><\/span>3. Use 3-character hex colours where possible<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>color: #ebc;      \/* not #eebbcc *\/<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"4_Use_CSS_shorthand\"><\/span>4. Use CSS shorthand<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Shorthand properties are shorter and easier to read, and smaller files help <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/css-files-load-faster\/\">CSS load faster<\/a>:<\/p>\n<pre><code>\/* Instead of this *\/\r\npadding-bottom: 1em;\r\npadding-left: 1em;\r\npadding-right: 1em;\r\npadding-top: 1em;\r\n\r\n\/* Write this *\/\r\npadding: 1em;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"5_Dont_add_units_after_zero\"><\/span>5. Don&#8217;t add units after zero<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>margin: 0;        \/* not 0px *\/<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"6_Put_declarations_in_alphabetical_order\"><\/span>6. Put declarations in alphabetical order<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sorting properties alphabetically makes them quicker to find and avoids duplicates:<\/p>\n<pre><code>.box {\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n  color: #000;\r\n  text-transform: uppercase;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3 {\r\n  color: #000;\r\n}<\/code><\/pre>\n<p>Notice the other good habits in that code: block contents indented, a space after each colon, a semicolon after every declaration, each selector and declaration on its own line, and a blank line between rules.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Use_meaningful_hyphenated_class_names\"><\/span>7. Use meaningful, hyphenated class names<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Name classes for what they are, not how they look, and separate words with hyphens: <code>.site-nav<\/code> or <code>.video-player<\/code>, not <code>.blue-box<\/code> or <code>.navbarleft<\/code>. Avoid ID selectors for styling, as they&#8217;re hard to override.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Use_HTTPS_and_valid_semantic_HTML\"><\/span>8. Use HTTPS and valid, semantic HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Load images, scripts and stylesheets over HTTPS. Use elements for their meaning, such as <code>&lt;nav&gt;<\/code>, <code>&lt;article&gt;<\/code> and <code>&lt;button&gt;<\/code>, and give images useful <code>alt<\/code> text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Mark_to-dos_with_TODO\"><\/span>9. Mark to-dos with TODO<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google suggests marking unfinished work with <code>TODO<\/code> followed by your name, such as <code>&lt;!-- TODO(chandra): add footer links --&gt;<\/code>, so it&#8217;s easy to search for later.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Always_validate_your_code\"><\/span>Always validate your code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Check your HTML with the <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener\">W3C Markup Validation Service<\/a> and your CSS with the <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">W3C CSS Validator<\/a>. They catch unclosed tags, typos in properties and other errors that browsers silently ignore.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Let_tools_do_the_work\"><\/span>Let tools do the work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You don&#8217;t have to remember every rule:<\/p>\n<ul>\n<li><a href=\"https:\/\/prettier.io\/\" target=\"_blank\" rel=\"noopener\">Prettier<\/a> formats HTML and CSS automatically with consistent indentation and spacing.<\/li>\n<li><a href=\"https:\/\/stylelint.io\/\" target=\"_blank\" rel=\"noopener\">Stylelint<\/a> warns about CSS errors and can enforce rules like lowercase hex colours and alphabetical order.<\/li>\n<li>Most code editors, including VS Code, can format on save.<\/li>\n<\/ul>\n<p>Clean code also makes optimisation easier, like our tips to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/\">load Bootstrap faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_Google_use_this_style_guide_for_rankings\"><\/span>Does Google use this style guide for rankings?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. It&#8217;s a coding guide for developers, not an SEO rule. But clean, valid HTML helps browsers and search engines read your pages correctly.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Should_I_use_tabs_or_spaces\"><\/span>Should I use tabs or spaces?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google&#8217;s guide uses 2 spaces. What matters most is being consistent across your project.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_alphabetical_CSS_order_required\"><\/span>Is alphabetical CSS order required?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, it&#8217;s a recommendation. Some teams group properties by type instead. Pick one approach and use it everywhere.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know Google publishes an HTML\/CSS Style Guide, the same rules its own developers follow? We all edit HTML&#8230;<\/p>\n","protected":false},"author":4,"featured_media":63675,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-40761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=40761"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40761\/revisions"}],"predecessor-version":[{"id":65509,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40761\/revisions\/65509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/63675"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=40761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=40761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=40761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}