Multiple Style Locations

On this site you'll notice three different locations for styling. I'm using the

• style attribute style="..."
• style tag <style>...</style>
• external stylesheets <link rel="stylesheet" href="/static/styles.css" />

There is a gradual percolation of styles from the most local to the most remote. A major factor is that I am the only developer working on this codebase. There isn't any need to coordinate and share expectations with others. I don't think this approach would be tenable with a medium to large team. It could perhaps work with smaller, more experienced team. With a larger, more varied team I've found it better to pick a way/place to style and share that expectation with the team.

style="..." Attribute

Disclaimer: I know there are many warnings about using this technique. I was taught to never use it. It's not reusable, you get stuck fighting the cascading nature of css, for duplicated elements you are transferring more data than is needed, etc.

However, to just get started (and avoid picking tooling upfront), I found inline styles very appealing. I found myself putting the styling for a single element directly into the element's attribute. I think this came from my more recent experience with Emotion CSS. I didn't have to come up with class names. Moving HTML elements and styling content flowed very nicely.

This is merely the first step in styling. Most of these styles have already been "pulled" up into a style tag or a shared spreadsheet.

<style>...</style>

Once styles no longer adequately reside in an element style attribute, they get pulled up into page <style> tag. This might occur when the style needs to be reused. If pseudo selectors or media queries are needed then they'll go into the style tag as the style= attribute also doesn't allow for them.

<link rel="stylesheet" href="/static/styles.css" />

Finally, if styles are needed across pages then they get pulled into the common stylesheet.

Copy and Pasted HTML Layout

When I create a page for this site, I will:

1. Create a new empty html file
2. Write out the new content
3. Copy over the layout and styling from a similar file

The Reason

I just wanted to get this site going. I fall into analysis paralysis especially when making tooling decisions. So to just get going I decided to write straight HTML files with the expectation that some day I will need to extract the content to a better system.

With just html, there is no build step and deployment is just uploading the files. I can easily and cheaply (free) deploy using Netlify.

Unexpected Benefits

This process allows me to focus on the important things first (the content) and then work on the details (the presentation). The initial lack of styling gives my brain the permission to sketch things out. I can use header tags to create an outline. Then I can go back and fill in that outline as it makes sense, or I have inspiration.

Once the content is generally locked in, then I make it presentable. This involves copying over the layout markup and creating any novel styling needed.

Downsides

Making changes to elements like navigation or styling that is across pages is a real pain. Fortunately at this point there haven't been much of those changes yet.