Skip to content

Instantly share code, notes, and snippets.

@WebDevLuke

WebDevLuke/ITCSShttp2.html

Last active April 1, 2019 15:40
Show Gist options
  • Save WebDevLuke/f7d344017358d5eedc1392e4b01fb57d to your computer and use it in GitHub Desktop.
Save WebDevLuke/f7d344017358d5eedc1392e4b01fb57d to your computer and use it in GitHub Desktop.
Download ZIP
ITCSS HTTP2.0 Exploratory Template
Raw
ITCSShttp2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1" />
<!-- Imports ITCSS settings / tools / generic / elements layers -->
<link rel="stylesheet" href="static/core.min.css">
</head>
<body>
<!-- Simple button component which only require its own styles and logic -->
<link rel="stylesheet" href="static/components/button.min.css">
<script src="static/components/button.min.js"></script>
<button class="c-button"></button>
<!-- Much more elaborate pattern involving objects / component / utilities -->
<link rel="stylesheet" href="static/objects/expander.min.css">
<link rel="stylesheet" href="static/utility/spacing.min.css">
<link rel="stylesheet" href="static/utility/widths.min.css">
<script src="static/expander.min.js"></script>
<div class="o-expander u-margin-bottom-regular">
<div class="o-expander__heading">
<div class="u-width-8/12">
<link rel="stylesheet" href="static/components/typography.min.css">
<h1 class="c-type-alpha">My Expander Component</h1>
</div>
<div class="u-width-4/12">
<button class="o-expander__toggle">Open</button>
</div>
</div>
<div class="o-expander-content">
<link rel="stylesheet" href="static/objects/box.min.css">
<div class="o-box o-box--spacing-small">
My Expander Content
<link rel="stylesheet" href="static/objects/media.min.css">
<div class="o-media">
<div class="o-media__image">IMG</div>
<div class="o-media__content">Media Object</div>
</div>
</div>
</div>
</div>
<!-- Would second usage of the same pattern be the same, except imports? -->
<div class="o-expander u-margin-bottom-regular">
<div class="o-expander__heading">
<div class="u-width-8/12">
<h1 class="c-type-alpha">My Expander Component</h1>
</div>
<div class="u-width-4/12">
<button class="o-expander__toggle">Open</button>
</div>
</div>
<div class="o-expander-content">
<div class="o-box o-box--spacing-small">
My Expander Content
<div class="o-media">
<div class="o-media__image">IMG</div>
<div class="o-media__content">Media Object</div>
</div>
</div>
</div>
</div>
<!-- If another pattern uses same objects or utilties, would we always keep the imports present, for easy copy/paste? As wouldn't they just use cache from previous import? Or would we remove the imports if they are already imported as part of previous elements which use the object/utility -->
<link rel="stylesheet" href="static/objects/box.min.css">
<div class="o-box o-box--spacing-small c-my-component">
My Custom Component
<link rel="stylesheet" href="static/objects/media.min.css">
<div class="o-media">
<div class="o-media__image">IMG</div>
<div class="o-media__content">Media Object</div>
</div>
</div>
<!-- Compiled JavaScript, placed at end of document so it doesn't block loading of everything else -->
<!-- Any global level JS -->
<script src="static/core.min.js"></script>
</body>
</html>
@csswizardry
Copy link

CSS

In a HTTP2 context, because requests are so cheap, would it be worth moving away from a bundled approach…

Don’t go full H/2 just yet. A handful of larger bundles will work better than one file per component (except in the cases with in-body CSS we already discussed). Smaller files achieve suboptimal compression deltas, so you won’t save as much via Gzip as you would with a few key bundles. I’d recommend bundling very infrequently changing stuff like Normalize.css, reset, grid system together; have an app.css or similar that contains your header, footer, buttons etc. that changes on a per-release basis, then have per-page CSS where sensible (e.g. login.css), then the milestone components for in-body use cases.

JS

Just a quick one, is there any rule of thumb which you use to judge if a JavaScript snippet would need to be featured in a blocking context or an async context?

  • <script>: Needs to initialise core functionality for other packages or in-page JS to use (e.g. jQuery); needs to set up a context for the page to be rendered correctly (e.g. Modernizr).
  • <script async>: Doesn’t depend on any other files (async will execute the moment it arrives, so if two files rely on each other but arrive in the opposite order than you expect, you’ll get errors). Use for content not needed for first render, but that you’d like to be functional as soon as possible (e.g. self-contained JS for your nav).
  • <script defer>: Executes just before the DOMContentLoaded event, so runs after the HTML has been parsed. Useful for anything that isn’t needed immediately or even ASAP, such as starting your carousel animating, or loading your social media widgets, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment