Table of Contents
It was a day ago, on Friday, when I was working on project for my client and I realized that my CSS stylesheet looks like a mess. Seriously, it was a complete mess when it came to groups of rules. Even though I am consistent in sorting individual rules – I’m using Code Guide by @mdo with addition of alphabetical sorting – I never consider splitting CSS into separate parts.
The overall idea is to take all your rules and divide them into individual parts. You can do it through multiple stylesheet or, as I approach it right now, by keeping everything in one file while marking every section of rules by comments. Question is, what parts or modules should you create to group your CSS rules. I offer you these as basic backbone – base, typography, layout and decoration.
Base
Inside Base module you can put only things that modify html and body of the page. That is all. For example, to create a full width and height website:
/* Base */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
Typography
Personally, I use typography to set main font family and font size. For example:
/* Typography */
html {font-size: 16px;}
body {font-family: Verdana, sans-serif, arial;}
h1 {font-size: 1.6em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
a,
p {font-size: 1em;}
– note: it depends on you how you set your base font family, if through body or through individual elements
Layout
In this module belongs everything from display property, position, floats, widths, heights and etc. Simply everything that changes the design of page and content (moves or re-size it). For example:
.row {width: 100%;}
.col-1,
.col-2,
.col-3 {33.3%;}
.wrapper {
width: 100%;
max-width: 1000px;
height: 100%;
}
header,
section,
footer {float: left;}
– Attention: this module does NOT include decorative properties like shadows, borders, transitions, text-decorations, cursor, animations and other similar properties.
Decoration
Finally a place where to put that shiny tricks. Here you can put all the properties are mentioned in note above like shadows, borders, transitions, text-decorations for links, colors, background and other properties modifying visual side of elements. For example:
a {
color: #000;
text-decoration: none;
transition: color .5s;
}
span {color: #c00;}
a:hover {color: #eee;}
h1 {text-shadow: 1px 1px 2px #000;}
How about media queries??
One think that kept my mind racing for a while, were media queries. These little helpers are awesome and necessary for crafting truly responsive experience, so there is no way you can exclude them. But where to put them? Ways that are the most obvious are either put them into module created strictly for media queries. For example:
…
/* Media Queries */
@screen and (max-width: 768px) {}
@screen and (max-width: 960px) {}
– note: since I’m following mobile-first philosophy, width around 480px is base layout and therefore is not needed to be included as breakpoint in media queries
The pros of doing this is that you will know very well where to look for your codes when you will need to modify the layout for different breakpoints (not resolutions!). However, the cons can be, in case you are working with huge amount of code, that you will get lost or spend couple minutes to find specific element inside you queries.
Little example from life… In one of client projects I’m working on now there is a search bar in the upper part of the page. This bar is stretch across the width of page (wrapper div) which is set 960px and height is 93px. It contains some headings, image, search input and submit button. As you can imagine, all the content inside is positioned with pixel precision to fit in. On desktop layout everything is fine because you have plenty of space. First issues start to appear when you re-size the width to approximately 900px. While overall layout works, layout of search bar breaks and content starts to stack. This situation is happening over and over again as you re-size the width down. First thing I did was to talk to client about it and discuss available solutions. Remember, it is always better to discuss every issue with your client, no matter how small it is. The search bar was main feature of the page and so cannot be removed and client did not want any big modifications. Long story short … It took almost hour, about 9 media queries and changing width pixel by pixel to cover every breakpoint and to make sure that search bar will handle anything, from large screen to small mobile phone (320px), but it works great. To be completely honest with you … The search bar is my most favorite part of that project. Seriously! It was a huge challenge to make it excellent and bulletproof, but at the end I learned so much and stretched my skills.
The point is that just for that one search bar there is 9! media queries and significant amount of code. Imagine to look for something here. That was reason why I tried different approach.
This second approach is to include them inside your already existing modules, simply put them after the elements they modify. Since I’m using Sass on everyday basis, I also using this approach. It is much easier to have an overview where individual things are. Searching is also much easier, the only thing you need to know is the element you are looking for and then specific breakpoint. For example setting a typography for page:
/* Typography */
h1 {font-size: 22px;}
@media screen (max-width: 768px) {
h1 {font-size: 30px;}
}
@media screen (max-width: 960px) {
h1 {font-size: 40px;}
}
h2 {font-size: 20px;}
@media screen (max-width: 768px) {
h2 {font-size: 28px;}
}
@media screen (max-width: 960px) {
h2 {font-size: 38px;}
}
h3 {font-size: 18px;}
@media screen (max-width: 768px) {
h3 {font-size: 26px;}
}
@media screen (max-width: 960px) {
h3 {font-size: 36px;}
}
a,
p {font-size: 16px;}
@media screen (max-width: 768px) {
a,
p {font-size: 18px;}
}
@media screen (max-width: 960px) {
a,
p {font-size: 20px;}
}
As you can see, in this way it is pretty easy to organize you media queries and search inside them afterward. After couple of tries and switching between styles, I realized that this approach works the best, at least for me. However, for you it may be different. You will have to experiment and find out what works for you.
Summary
This post is primarily to inspire you and to make you think about the way how you approach you CSS. Since everyone is different and one style does not fits all, it is up to you to find what you like through trial and error and to make your crafting process as easy and fluid as possible.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
