Writing CSS is simple, writing good CSS is difficult

Don’t use CSS frameworks unless you understand CSS properly

Using Tailwind saves time and solves a lot of problems I’ve had in recent years

I will continue to use Tailwind indefinitely

Writing CSS is simple, writing good CSS is difficult. Through the years I’ve tried several different approaches of writing, maintaining and scaling CSS with varying success. Here’s a trip down my memory lane.

My approach to CSS? No approach really. I styled whatever was available (id:s/classes) to style in my main.css file. Naming conventions? As long as I had some sort of idea what I was styling, that was good enough. Needless to say, my CSS was a mess.

Later in this era, around 2012-2014, I started using CSS frameworks, namely 

. Foundation was my primary framework. Using it made it easier for me to accomplish things I wasn’t capable of on my own at this point.

Positives and negatives of using frameworks

This has already been said by thousands of people before me, so let’s keep it short.

Debugging and overwriting framework styles

Frameworks semantics vs preferred semantics (naming etc)

In short, I’m glad I’ve used these types of frameworks, I have benefited from doing so, but I didn’t gain the knowledge I needed to prepare me for what was coming.

In 2016 I graduated from school, applied for jobs and eventually got one a few months later.

Early on, I realised I didn’t know CSS as well as I thought I did. I arrived at a company where custom CSS was more or less standard, while frameworks had solved most of my CSS so far. I learned a lot about methodologies, naming conventions and CSS in general during those first months.

Through the years we’ve mainly used CSS frameworks to take advantage of the grid system, leaving out all other parts of the framework. We’ve used the 

One annoying thing with combining frameworks with BEM has been the mix of naming conventions in our HTML. Another thing is the daunting and time consuming task to come up with decent class names for all components and HTML elements.

While working on a large scale component based project, we discovered the need to tweak spacings between components depending on where it was used. Shortly after, I read about utility classes for the first time. After that, we generated hundreds of responsive utility classes for margin and padding. While we managed to get spacings correct, a lot of the classes were left unused, but still present in our production stylesheets.

At some point, maybe at the end of 2018 or start of 2019, I decided I wanted to move away from CSS frameworks entirely. I read about ITCSS, 

 (aka CSS Wizardry) methodology for writing sane, manageable and scalable CSS. I started to study Bootstrap and Foundation in detail to try to understand how they were built. I looked at other CSS setups and picked up bits and pieces I liked. Around this time, my colleague mentioned a new thing called 

, a utility-first framework. I had a look but quickly decided I was not interested. I had just fallen deeply in love with BEM and was hooked on ITCSS. So instead I built a custom framework with a solid grid system, handy utility classes and beautifully named and structured SCSS and HTML, figuring this was what we were going to use the following years. It was never used, the reason being that we didn’t have any new projects by then. I’m glad for that now.

The large scale web project me and my colleagues had been working on for almost three years began to come to an end. We then realised that another way of writing CSS would have been more convenient. We had lots of unused CSS, mixed naming conventions and huge amounts of custom CSS to maintain - Tailwind CSS was mentioned once again.

As I began to develop this portfolio during spring/early summer 2020, I decided to give Tailwind an honest try. Tailwind felt odd and “wrong” in the beginning. My HTML felt bloated compared to the BEM classes I had used before. After a while though, I realised how smooth my workflow was. I only moved between my HTML and my Tailwind config file, occasionally writing a few lines of CSS that Tailwind didn’t already have classes for.

Of course, it takes a while to get used to all the classes in the HTML if you’re used to BEM. It takes a while to memorise what class does what, but Tailwind’s documentation makes it easy to find what you’re looking for. Those few occasions when you have to go to there takes less time than creating a new CSS/Sass file, importing it correctly and then write your own custom styles, a massive win according to me. We don’t even have to come up with convenient names for our classes, we just combine them until our elements look like we want them to.

Another advantage is the integration with Purge CSS, which removes all unused CSS, since one huge performance challenge with CSS is taken care of right away.

Also, since almost no additional CSS is needed, a structure or methodology for structuring our CSS files becomes redundant.

To sum up, I don’t think your CSS journey should begin with Tailwind, rather end with it. Once you know CSS in and out, Tailwind is the perfect toolkit for writing, maintaining and manage CSS according to me. Out of the different approaches and methodologies I’ve tried throughout the years, Tailwind feels most convenient so far. Tailwind solves a lot of the problems we’ve had for many years, and most importantly it saves us a lot of time.

Some say Tailwind sites, like Bootstrap sites, are immediately recognisable. That may be true in some sense, but only if you just use it as it is. My experience is that Tailwind is incredibly easy to extend and customise to be able to build just about anything. I don’t think this site looks like “a Tailwind site” at first sight?

Have you, like me, tried several different CSS methodologies and frameworks without finding what you’re looking for? Tailwind is what I’ve been looking for.

The answer, my friend, is blowin' in the Tailwind

I've always been afraid of JavaScript, have never really understood or learned the language properly. Anyhow, the last year I've spent a lot of time learning JavaScript. Although I'm still far from an expert, I'd say I've improved dramatically. While earlier I almost only wrote HTML & CSS (which I still do and love) and some basic jQuery, I tried to get a hang of vanilla JavaScript and ES6 to actually build and deploy my own portfolio using Gatsby and the Jamstack approach.

I've been doing front end development in 

. Although I've enjoyed working with both CMS:es, some aspects of the front-end development have been challenging and complicated – things like performance- and image-optimisation for example. Furthermore, keeping plugins and modules secure and up to date to make sure that sites are up and running, it is not only time consuming but also one of the less inspiring parts of the job. What if I would be able to get away from that?

The Jamstack approach immediately caught my attention once I read about it. Smooth and flexible developer experience, being able to deliver secure, fast sites right out of the box while reducing the backend complexity is pretty much all I've ever wanted:

Jamstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.

Building a website has never been more fun, rewarding and inspiring. The site you're currently visiting is built using 

 for static site generation, with headless CMS 

A brief summary of how this portfolio was built using the Jamstack approach.

Giving the Jamstack a go

Make sure you grasp the basics, and apply them

During six years in the front-end development field I’ve almost always felt like I’m way behind. New frameworks and techniques keeps popping up while I feel like I stand still, a passive spectator sticking to the good old stuff I was comfortable with.

By doing so, you get things done, but you don't grow and develop. I was never 100% satisfied with the things I produced, knowing things could be done better. This feeling will probably persist unless you do something about it. Looking back now after a few years in the business, I’ve tried to gather some things that helped me grow.

To be able to step outside your comfort zone, you need a solid base to rely on. Make sure you know the basics of semantic HTML, how CSS really works (don't start out with frameworks like I did) and why accessibility matters. A CSS-related tip is to study a framework like Bootstrap of Foundation in detail to understand how it’s built and where everything originates from. To be able to lean on this knowledge is invaluable when exploring CSS further for example.

No matter the context, things take time, up until the last years I haven't been patient enough, I haven't looked at my progress at a long term perspective. It's better to try to stay curious over time than super curious for short episodes, it pays off in the end.

Challenge yourself and step out of your comfort zone

They may be cliches, but they worked for me. I've mostly played things safe, held on to my “go to” framework and standard approaches, got things done, but was never entirely satisfied. Last year I was given the opportunity to work on a React-based search application in a project, a really good opportunity, being able to be kind of a sidekick and observe more experienced developers working.

Shortly after, I decided to buy a JavaScript course (

https://www.udemy.com/course/the-complete-javascript-course

). Things went slow for me in the beginning, but step by step, things started to get clearer, and I finally thought that JavaScript was fun, a milestone in my career.

I had kept my eye on Gatsby for a while, it seemed really nice, but I hadn't tried it out. Without knowing what I was getting myself into, I decided to try Gatsby out to see what it was like. In the beginning, I didn’t really have a clue what was going on, but along the way I started to understand React and how I could get things to behave like I wanted. A few months later, I’ve implemented a headless CMS, produced custom animations with GSAP and learned a new CSS framework (Tailwind). Just by randomly downloading Gatsby, I’ve grown enormously without any prior experience of these things.

Coming from a sports background, it has been obvious to learn from the best. Bend it like Beckham, dribble like Messi and finish like Ronaldo (both Ronaldos). Why haven't I had that mindset at work? There is so much talented people you can learn from, it’s literally just a Google search away. Another tip is to take part in a community, ask for help, help others and grow together.

If you have skilled colleagues or friends, ask them for feedback or how they would solve a challenge you currently have, they will surely help you out. Let go of the pride and prestige, it’ll make you grow both as a person and professional and to learn and develop new skills.

Step outside your comfort zone and dare to try new things - these are good old cliches that worked well for me! 

How I managed to improve in my field

Less work means less money at the end of the month

Learning new skills, work- and life-related

For many years I've been thinking about how less work and more spare time would affect me and my life. To get to the point of going from thought to action – and asking my boss about it – took quite a while.

At the end of 2019 I finally got around to ask – and there was no problem at all. So from January 2020, I've been working four days a week. Here are some of my insights, starting with a few downsides.

An obvious disadvantage of working less is that you get paid less, no matter how you spin it.

Although I now make less money, I've managed to save the same amount every month even after working less.

I choose Friday as my day off, I appreciate coherent time off and figured an extended weekend would suit me well. It sure does, but I miss out on that Friday feeling, although I get kind of the same feeling on Thursdays instead.

I can't say that I get just as much work done in four days as in five but I do feel that I'm more motivated and effective during those four days.

For me, motivation is everything, if I'm not motivated my inspiration and creativity suffers, nowadays that rarely happens.

Friday is my day for developing new skills, so far it's been mostly work related skills I've focused on, and it has paid off. This portfolio is a result of my Fridays off.

I'm the kind of person who needs personal space and Fridays are for that. I don't mind sitting alone for an entire day and digging into deep nerdy details of any kind.

I feel like I've been able to invest time in things that I didn't have the energy to prioritise before, things like talking to and visiting my grandparents, family and friends. I've always had a close relationship with the people around me, but the extra time has enabled me to invest even more time on that area.

Probably the most important aspect of this, another day off has helped me recharge my batteries before the weekend and also before heading into the next week. I feel less stressed overall.

I normally commute one and a half hours to work each way, practise soccer three times a week and play matches at the weekend . I am an overall ambitious dude. Before taking Fridays off, this constant stress affected me and my energy levels were often low, and in turn, my motivation and creativity suffered.

All in all, it's been one of the best decisions I've made, I feel like I have a lot more work life balance. This will probably not last forever, but in periods, I definitely think that I will do four day work weeks, the pros outweigh the cons by miles.

Ever wondered how a little less work and a bit more spare time would affect you and your life? Here's Henrik's point of view.

Occasional thoughts and insights from Henrik's everyday life.

The answer, my friend, is blowin' in the Tailwind

Giving the Jamstack a go

How I managed to improve in my field

Four-day work week insights