Introduction

Getting Started

About Author

My name is Jin Su Park and I am a designer that takes great pride in producing quality designs and products. My journey as a designer originated from a print and branding design background however I have broadened my focus to adopt digital design over the recent years. I am currently working as the Head of Design at an amazing tech company called ThisData where we provide the tool that allows organizations to gain clear visibility of the relationship between their people and their data.

I try to be awesome at our company by designing amazing experiences, writing and maintaining clean CSS for our core product. This is where the idea of developing my our own CSS style originated. Outside of the tech world, my wife and I run a boutique design and digital art service called Nu Nomen Boutique Studio.

So enough about me, lets talk CSS.. The thing that is so easy to do but difficult to do right. It can sometimes be underrated and yet it controls the entire visual aspect of your product/website. It's what your customers see and engage with so you want to get it right! Right? Well, turns out finding the best magical CSS architecture isn't as straight forward as googling "Which CSS approach is best?".

There are many resources available online, but the confusing part is there is no "one way fits all" approach on how you should write and organize your CSS. Infact, many of them even contradict and share opposite opinions.

You don’t need to choose one methodology; combine the concepts of a few methodologies into one that works for you and your team. - Patrick Catanzariti, sitepoint

Without going into too much detail, it became clear to me that the best approach was actually a combination of approaches. Each system has their own benefits and it was up to me to mix them to find the system that was best tailored for my project.

This is what makes CSS so fun and flexible. I decided to accept and embrace that. Taking into account everything I've tested and learnt so far, I decided I wanted to write my own system that I call "Express". Not only is this a fun and useful project but it is also an learning opportunity to experiment, identify problems and solve them.

So what is Melody CSS

Melody is my own take on how to write well-organized and scalable CSS. Although it doesn't come with a full-featured boilerplate framework such as Bootstrap or Foundation, it does provide a very light component library to help you get started. It can also be easily customized to handle larger projects.

Melody is an express css framework, meaning it conveys feeling or thought with words while also operating at high speed. This is how I believe CSS should look and behave, easily readable, understood and quick to implement.

Melody adopts various existing CSS methodologies such as BEM and SMACSS with my own twist to provide you with a CSS design that will hopefully eliminate team scaling pains and save you time. It also relies heavily on the LESS pre-processor, however many of its features can be ported to support SASS.

Importance of keeping your CSS Green

Designing a great product is iterative and an ever-evolving process, the same goes for writing and organizing CSS. To me, green CSS is easy to read, find and update with an appropriate consideration to speed and performance. As designers and developers test and iterate on their front-end, it's important for our CSS to be handled in such a way that allows us to easily pull apart, experiment, test, and ship in small pieces. This is why the idea of keeping things "Modular" and decoupling is a hot topic in the CSS world.

So how do you organize your CSS to be manageable and easily understood? How do you deal with overrides and CSS specificity? How do you decide what to call your classnames and when to create new ones? Let's begin our journey with a simple but crucial concept, file organization.

Get in Touch

Please flick me an email or follow me on Twitter, I would love to get your feedback! Melody is an ongoing project and I hope to make further improvements as I continue to learn and experiment with CSS.