Rules I follow when writing web code

The web is a continuum, not a platform.

Alex Russell, Google Chrome team

A couple weeks ago, I started a brand new web project I call Record Rack. It's an inventory application that I'm working on with an old college mate specifically targeted for the African market. Maybe, I'll talk more about the story of Record Rack in a later post.

Over the course of writing the code today, I was going over rules I've picked up along the way from all the web projects I've worked on¹. Here's what I came up with:

• Don't modify CSS through the style property in JavaScript. To change a style, add or remove the class names of an element instead.

  // Don't do this:
  const button = document.getElementById("button");
  button.style.display = "none";
  
  // Do this:
  const button = document.getElementById("button");
  button.classList.add("hidden");
  

  That way, CSS-specific code can stay in your CSS file:

  .hidden {
      display: none;
  }
  

• Use containers to contain data. This may seem obvious but I never knew what containers did in CSS, until I started building interfaces on the web. Containers help to keep elements contained in a certain area of the screen. A common use is to keep text in the center. You can do this simply with a little CSS:

  .container {
      max-width: 800px; /* Keeps contents contained */
      margin-inline: auto; /* Centers the container */
  }
  

• Use SVG spritesheets. This does not get enough attention. SVGs (or Scalable Vector Graphics) are the future of vector graphics. And they have a lot of benefits like being scalable to any size without deterioration in image quality, being lightweight (they are pretty much XML files), and being customizable or extended with CSS and JavaScript. An SVG spritesheet is a collection of SVG sprites (mostly icons) all in one file. This is better than using hardcoded SVGs in your HTML files because SVG spritesheets are cached (like CSS and JavaScript are). This prevents them from being downloaded each time your refresh your page. If you want a simple tool to create SVG spritesheets, look no further than a tool I created a while ago, ssm². Once your spritesheet is created, you can use a sprite like this:

  <svg class="menu icon">
      <use href="/static/icons/sprites.svg#menu></use>
  </svg>
  

• Use HTML and CSS for your UI. You don't need any JavaScript. This ensures faster loading and rendering.

• Use IDs for elements that appear once, and classes for elements that appear more than once. This simple principle helped me get rid of BEM in my CSS and I'm a happier man now 😄.

• Use buttons to respond to clicks and anchors for taking visitors to another page. Sounds simple, but some people interchange the two. Swapping them could disrupt the accessibility of the webpage.

• Use rem and hsl() when you can. rem is a size unit in CSS that's based off the default font size (usually at 16 pixels). Using this unit helps to keep spacing between elements proportional to the font size and more uniform. Using hsl() makes it easier to differentiate colors. I've written extensively on it in a previous post.

• Create deploy scripts. Because ain't nobody want to have to type a thousand commands just to update your website. And no one definitely has time to build anything either.

• Use dev tools for debugging and fine tuning an interface. Dev tools is your best friend in the web dev, I can't stress this enough.

• Use @container over @media whenever possible. CSS containers are more local than media queries; it only cares about its own size rather than the size of the whole page. This makes them easier to work with and more flexible since you can rearrange the container's elements at different screen sizes.

• Test for responsiveness early. Make sure your layouts work well. Also, work on the desktop interface first as it is usually the more complex. Mobile is generally simpler and straightforward, making it easier to collapse the desktop into the mobile screen size once complete.

• Use flexbox over grids. Flexbox is good for one-dimensional layouts (i.e. layouts the stretch in only one direction like rows and columns) while grid is good for two-dimensional layouts. In my experience, most of my layouts have been one-dimensional, and mastering flexbox has made it easy to build interfaces faster.

• Set up a cache buster. There's nothing worse than pushing up your changes to the server, only to refresh your page and not see any of your changes³. The cache is the one to blame for this, but cache busting fixes it. I wrote my own cache buster script that creates a hash and appends it to the end of all cacheable resources (like CSS files, JavaScript files, images, SVG spritesheets etc.). That way, when I want changes to happen on the browser, I just bust the cache and refresh the page. I run it like this:

  $ python -m app.cachebuster mmhq.me
  

  Then voila! My updates show immediately after I refresh the browser.

• The cascade is your friend, use it! I'm talking about the CSS cascade, or the "C" in "CSS"⁴. The better you get familiar with it, the less likely you would end up breaking your code.

• Semantics matter. That's the key to SEO and accessibility. It all starts with choosing the right HTML elements to use on the page. And by avoiding JavaScript frameworks, I can skip the extra steps required and get them for free with semantic HTML.

Bottom line

Well, that's all folks! I'm heading back to go wiggle my fingers some more for this web project. Cheers 🍻!