Written by Shawn Tucker, Web Developer
When it comes to building the front end of your website, there’s nothing more important than CSS. CSS is what takes your site from a white page with plain text and transforms it into a beautiful webpage with vibrant colors, font styles, and clever positioning of your content. At its core, CSS is very easy to understand. You add a class to an HTML element, and in your style sheet you can give that element different styles and colors. This is simple enough to understand, but when you dive deeper into CSS you start to run into several more complex problems.
When you first open a blank style sheet you are immediately faced with the first great challenge of CSS. Some immediate questions that will come across your mind are: How do I write these styles in a clean and easy to read way? What sort of naming conventions do I use for my classes? Can I break my classes up into sections so that they are easier to find? How do I order my styles so that they are consistent? CSS is written in a list style format, which makes some of these questions difficult to answer. Answering these questions and sticking to the standards you set make up a huge part of writing good, clean CSS.
As a part of our front end development team at Robintek, I’ve always been interested in answering the questions about naming conventions and grouping classes together. Keeping these questions in mind I started to change the way I think about writing CSS. How can I get the most use on my website out of one class? Is there a smarter way I can group my classes together so that they are easier to find and read? These questions and more led me change the way I write CSS and come up with a new phrase which I like to call Min-Maxing CSS. 
The term Min-Maxing actually comes from Role Playing games. It’s a strategy of play where a player creates the strongest character possible by optimizing and focusing on the types of traits that make their character powerful. When you apply this term to CSS, you can look at your classes from a broad viewpoint. How can I minimize the use of focused or repetitive classes in favor of broad classes that I can use more frequently on my website? Can I create general and less content specific groups of classes that make my style sheet cleaner and easier to read? These questions are actually easy to answer when you look at your website as a whole instead of focusing only on the page you are working in, or the element you are styling.
The easiest way I’ve been able to start Min-Maxing my CSS is through the use of color. Color is one of the most common styles found in any style sheet. When you look at colors from a more broad perspective, you can usually find many common uses of colors in your design through various fonts and backgrounds. Keeping this in mind you can then create a section of classes in your style sheet for each color you intend to use on your website. These new classes can now be applied on every element of your website that uses those colors. This can save you an average of 3-10 lines of code in your style sheet each time you reuse a class instead of making a new one, saving you potentially hundreds of lines of code.
Writing clean, optimized, and easy to read code is one of the biggest and most important challenges faced by developers. This becomes especially true when writing CSS. Class sheets by their nature are going to be very large, and contain often thousands of lines of code. After all, CSS is what handles all of the styles, colors, and positioning of all elements across your website. Now using the Min-Maxing CSS strategy, you can optimize your style sheets leading you to faster load times, and a better user experience.
