After a number of years of principally ignoring it, I made a decision not too long ago that it was time for a refresh of my private website. The earlier iteration used a mix of Gulp and Bower, coupled with Susy, a Sass library for the grid system (model 2, reasonably than the newest model 3 launch). The final time I did any work on it was round 2015 and, suffice to say, my instruments have been fairly out-of-date. This simply wasn’t going to chop it in 2019.
I didn’t need to spend an entire lot of time configuring a brand new set of instruments for what I meant to be a quite simple single-page website. I didn’t plan on utilizing Javascript, though I wouldn’t rule this out down the highway (as progressive enhancement). I wished to get my website constructed and printed as shortly as doable, in order that I’d have one thing to level folks to in the event that they need to know what I do. However I additionally wished to have the ability to keep it comparatively straightforward – add additional talking engagements, articles and bio updates when the necessity arises. It was essential to me that re-visiting the positioning a little bit approach down the highway wouldn’t require an entire new re-configuration of a fancy set of instruments – I didn’t need to spend an hour updating dependencies earlier than I may do any precise work. I would like my instruments to get out of the way in which so I can focus on the issues I like: HTML and CSS.
On the core, a HTML file and a CSS file are all you want to construct a web site. (And naturally, a CSS file is non-obligatory! However there aren’t many web sites you’d need to construct with out one.) However the final time I constructed a website with out any form of tooling was most likely 5 or 6 years in the past. I’ve turn out to be fairly depending on Sass, and figured that writing CSS with out it might be fairly irritating. Nonetheless, CSS has moved on considerably within the intervening years. We now have CSS variables (or customized properties), which permit us to retailer and reuse property values all through our CSS file. We even have the CSS Grid Structure specification, which makes it extremely easy to construct layouts – there’s now not any have to import a dependency like Bootstrap for its grid system, and you’ll minimize out various CSS (however some fallbacks you might need to write down for older browsers).
Not solely that, however code editors have come alongside in leaps and bounds too. With VS Code, it’s very straightforward to seek for key phrases inside your file or undertaking, find-and-replace values and lint your code. A complete plethora of extensions permit issues like autocompletion, autoformatting, and even selecting colors proper from the editor.
So possibly writing vanilla CSS wouldn’t be so burdensome in spite of everything. I made a decision to strive constructing my website in HTML, CSS and nothing else.
Naturally there are some benefits of automated instruments that I’ve needed to forgo. I can’t minify my recordsdata, lazyload photographs or inject vital CSS, all of which might give a efficiency benefit. However on stability I’m pleased with that, as the positioning is fairly light-weight anyway. I’m not utilizing any full-width photographs, and the photographs I’m utilizing are compressed sensibly, so their file sizes are small. In actual fact, it scores 100% for efficiency utilizing Google’s Lighthouse device for evaluation – higher than something I’ve ever constructed earlier than!
A scientific strategy
My first port of name was semantic HTML. I wished the positioning to be as accessible as doable. This knowledgeable the design too, which is sort of easy and minimalist, with out extraneous muddle. One factor I used to be all for experimenting with nevertheless, is the grid system. Lots of websites default to a 12-column structure, which in fact has its benefits. However I all the time like the thought of utilizing uneven grids, which really feel contemporary and totally different. I used the identical uneven grid for every part of my website, and nested two- or three-column grids for the blocks of hyperlinks for articles, talking engagements and websites I’ve labored on.
CSS
One factor I actually missed from Sass is with the ability to separate your recordsdata into partials. Writing all of the CSS in a single file isn’t the simplest expertise, even with all the benefits of fashionable editors. In each my HTML and CSS recordsdata I used to be cautious to group associated kinds utilizing spacing and feedback, to make it simpler to search out the related blocks. I used BEM for naming my CSS courses, which helped with this.
I discovered that pondering systematically lends itself properly to the single-CSS-file strategy. I didn’t make use of a CSS reset (e.g. Normalize), which I might normally attain for nearly with out serious about it. I leaned on default styling, (e.g. solely altering font sizes when the defaults didn’t look proper) and configured some world and base-level guidelines, which I then solely overrode once I wanted to utilizing one thing akin to Harry Roberts ITCSS methodology. I solely added courses when needed, and named these fastidiously to make sure they might be reusable to an extent. I utilised the cascade and inheritance when doable, and let CSS do the onerous work for me. That is in distinction to an atomic CSS strategy (which I’d been utilizing in my earlier job for the perfect a part of a yr, with Tailwind), which favours composition over inheritance.
For a really massive website, it may be that the systematic strategy I took is much less sensible and has some efficiency drawbacks, but it surely was perfect right here.
Drawbacks
Along with partials, I actually missed nesting from Sass. I don’t advocate going overboard with nesting, however in terms of media queries, characteristic queries and pseudo-selectors, there’s little question in my thoughts that nesting makes writing CSS much more manageable. I additionally missed with the ability to use variables in media queries, which you’ll be able to’t do with CSS variables. Briefly, there are a whole lot of causes to maintain utilizing Sass in my work, and I don’t plan on stepping away from it simply but.
This simplified strategy for constructing a web site clearly doesn’t lend itself to dynamic content material. A number of folks have steered utilizing a static website generator. I’m absolutely conscious of the advantages of SSGs (this weblog makes use of one), but it surely was a deliberate resolution to not use one on this case. The purpose was to construct quick, with as minimal tooling as doable, and I don’t really feel like it is going to be too onerous a job to maintain such a small website up-to-date proper now. The entire website took round 4 hours to design and construct – I think about that configuring an SSG would have taken proportion of that point.
That stated, I wouldn’t rule out an SSG for the long run, and I’d contemplate including dynamic content material afterward. It will be good to drag in weblog articles and talking engagements with out having to replace manually.
Utilising the code editor
I exploit VS Code, and one Twitter person really useful an extension that permits you to compile Sass to CSS in your editor, with out a construct pipeline. This was a revelation, as I hadn’t actually thought of it as one thing my code editor may do earlier than. It jogs my memory of Codekit, a GUI device I used a couple of years in the past for compiling Sass, and is actually one thing I’ll check out sooner or later, though I don’t plan on including Sass to my private website at this cut-off date. It’s fairly spectacular simply how highly effective VS Code is turning into. There are another areas it may assist with my improvement course of too:
Snippets
In VS Code you’ll be able to outline reusable code snippets that act as shortcuts for what would in any other case be bigger blocks of code. If I used to be coping with a number of pages I feel I’d discover it a little bit of a headache having to make sure the HTML for my header and footer was the identical all over the place. I may create a snippet, and have them populate any new HTML pages with just some keystrokes.
Though I didn’t use any snippets within the first iteration of my website, I feel they’ll even be actually helpful for media queries. I may set a couple of snippets for widespread breakpoints and save myself a whole lot of time typing issues out. I’m actually eager to introduce these to my workflow.
In-editor minification
There’s are additionally a couple of extension out there that may minify your CSS, HTML and JS with a easy shortcut. It may be useful for efficiency to minify these, and I can think about this will probably be very helpful if my CSS file grows.
Conclusion
I really feel like many individuals will probably be fast to dismiss this as being utterly anti-tooling, which isn’t the case in any respect. There are a whole lot of conditions the place the complicated instruments we’ve developed as an trade are good and needed. I’m absolutely conscious the strategy I’ve taken right here is unlikely to scale properly past a a quite simple website.
There are clear advantages to a construct course of, and good the reason why we as builders have come to rely a lot on NPM, Webpack, Gulp, Babel and extra. However whereas I wouldn’t advocate constructing all websites in the way in which I’ve executed with my website, I feel we’re usually responsible of assuming that as a result of our instruments are nice options for some issues, they’re mechanically the answer for the whole lot. To paraphrase a well-known quote, “When your solely device is a hammer, the whole lot appears to be like like a nail”. Some websites merely don’t want the form of complicated instruments we’re accustomed to, and if something are extra performant and simpler to construct with out them.
I’ve a few freelance purchasers that want their (small) websites re-built, and I’m already pondering that this strategy might be going to be adequate, whereas beforehand I wouldn’t have thought of it. What’s extra, I’ll be assured that the code I write is maintainable, and I can simply add extra tooling if I have to down the highway.
I’d love to listen to for those who’ve had any related ideas (or for those who strongly disagree!), and if in case you have any suggestions for methods to hurry up the event course of with out including dependencies. After I tweeted about my website re-build, it turned my hottest tweet ever.
I re-built my private website utilizing simply HTML, CSS and nothing else, simply to see if that’s doable in 2019 and it seems it completely is 🤷♀️ https://t.co/2Hv5qQfw5s
— Michelle Barker (@mbarker_84) March 17, 2019
It’s fairly one thing when constructing a web site utilizing essentially the most primary applied sciences possible has one way or the other turn out to be revolutionary.
