Introduction

Zap is a lightweight css system designed with modern css practices and scalability considerations. It achieves both simplicity and scalability by providing just enough flexibility for designers but still keeping design and structure rigid to allow front-end developers to build future safe modular css.

CSS styling is easy to do but difficult to do right. There countless number of css systems ranging from Modular Scale sizing ratios, BEM naming convention, SMACSS, the Inverted Triangle concept all the way to full fledged frameworks such as Foundation, Bootstrap or Semantic UI. Without spending a considerable amount of time tinkering with each system, framework or process, it is difficult to decide which would help benefit your project the most whilst keeping in mind each of their limitations.

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

Zap combines the best features of most the popular existing methodologies and provides both designers and developers with a neatly packaged system to kick start any web project with a systematic approach.

Keeping CSS Green

Designing a great product is iterative and an ever-evolving process, the same goes for writing and organizing css. Zap applies this thinking by making css easy to read, identify 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 desconstruct, modify, test, and ship in small pieces. This is why the concept of keeping class components “Modular” and decoupling code is an important programming topic.

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 utilize your classes in the best way to reduce bloat and increase performance? Let’s begin our journey with a simple but crucial concept, file organization.