{"id":198,"date":"2012-06-21T23:15:10","date_gmt":"2012-06-22T05:15:10","guid":{"rendered":"http:\/\/www.crccheck.com\/blog\/?p=198"},"modified":"2015-10-11T22:28:50","modified_gmt":"2015-10-12T04:28:50","slug":"htmlcss-best-practices","status":"publish","type":"post","link":"https:\/\/www.crccheck.com\/blog\/htmlcss-best-practices\/","title":{"rendered":"HTML\/CSS Best Practices"},"content":{"rendered":"<p>In the past, whenever I&#8217;ve done HTML, I&#8217;ve been bipolar. Either do whatever had to get done just to get the page rendered right, or stick to the lofty tenets of html5 and write semantic markup. Now that I&#8217;ve bounced between those two for a while now, I&#8217;ve learned a few things:<\/p>\n<ul>\n<li>Doing <em>everything<\/em> semantically ends up counter-productive. Nothing generates document outlines correctly, and writing the CSS for having many H1 and H2 tags is going to be a nightmare. You&#8217;re going to end up sticking random elements in your &lt;header&gt; tags, and &lt;hgroup&gt; might as well not exist.<\/li>\n<li>Likewise, surprise surprise, just hacking things together makes a mess.<\/li>\n<li>Try to arrange your markup in this basic pattern: <code>section &gt; header + .content + footer<\/code>. Making sure your footer does <code>clear: both;<\/code> will also make your section act like it has a clearfix class.<\/li>\n<li>You can never have too many container elements. They let you mimic box-sizing: border-box, do border tricks, and do z-index fixes.<\/li>\n<li>Your reset\/normalize CSS should be designed to make body text look good, not the rest of the site.<\/li>\n<li>Use SCSS or LESS. Which one to use? I lean towards SCSS because it has Compass, but Bootstrap uses LESS. I really don&#8217;t care which one I end up with.<\/li>\n<li>Don&#8217;t rely on Compass. Treat it as a nice way to generate shortcuts for cross-browser compatibility and making sprites, nothing more.<\/li>\n<li>Margins should never be applied to the tops, only bottoms. Failure to follow this will result in random ragged top edges.<\/li>\n<li>When deciding if you should use margins or paddings, don\u00e2\u20ac\u2122t consider if things collapse first, assume borders and paddings first. Cycle through debug css. As a general rule, structure tags will end up with paddings and tags inside structure will end up with margins.<\/li>\n<li>If you do a grid layout using floats, make sure it also works at browser zoom levels.<\/li>\n<\/ul>\n<p>Hopefully I&#8217;ll come back and expand on each of those points in the future&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the past, whenever I&#8217;ve done HTML, I&#8217;ve been bipolar. Either do whatever had to get done just to get the page rendered right, or stick to the lofty tenets of html5 and write semantic markup. Now that I&#8217;ve bounced between those two for a while now, I&#8217;ve learned a few things: Doing everything semantically&hellip;<\/p>\n <a href=\"https:\/\/www.crccheck.com\/blog\/htmlcss-best-practices\/\" title=\"HTML\/CSS Best Practices\" class=\"entry-more-link\"><span>Read More<\/span> <span class=\"screen-reader-text\">HTML\/CSS Best Practices<\/span><\/a>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[1,4],"tags":[42,41,43],"class_list":["entry","author-showmewhatyougot","post-198","post","type-post","status-publish","format-standard","category-uncategorized","category-technical","tag-css","tag-html","tag-lpt"],"_links":{"self":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":4,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":759,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions\/759"}],"wp:attachment":[{"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crccheck.com\/blog\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}