Here at Pixafy, we have always done our best to create great, elegant CSS based upon industry best practices. Our front-end developers recently got together to discuss and formulate a set of standards to make all of our CSS as modular as possible. This setup allows us to move HTML structure and their CSS classes between projects while ensuring the output would remain consistent. This is the first installment on different areas of modular CSS. We’re starting with a specific, easy to implement topic:
Font Classes
Let me begin by explaining that this is not about the CSS declaration “font,” “font-family,” etc. The Font Classes I am talking about are helper classes to make the fonts on your site easily changeable anytime you want.
Font Classes are a CSS class added onto an element that will determine the font-family of the element and its children. These should be general classes used throughout your site, instead of adding the class to your element, id, or the specific class you use to style that element. It is purely a typographic helper class.
Why?
Font classes are modular CSS that make future changes to your fonts a breeze, when used correctly. Take this example:
/*--Font Classes*/
.base-font{
font-family: Open-sans, Helvetica, Arial, sans-serif;
}
.heading-font{
font-family: Georgia, "Times New Roman", Times, serif;
}
.paragraph-font{
font-family:"proxima-nova",Helvetica,Arial,sans-serif;
}
.navigation-font{
font-family:"adobe-garamond-pro", Georgia, "Times New Roman", Times, serif;
}
/*--end Font Classes*/
Now whenever you want to change all menu navigation fonts, you change only one property! This requires a bit of planning ahead of time, but it is well worth the effort.
One thing you want to avoid when creating Font Classes is making the CSS class the same as the font-family:
/*-- not good --*/
. proxima-nova {
font-family:"proxima-nova", Helvetica ,Arial, sans-serif;
}
This is bad because down the road, say you or another developer want to change the font used. This could happen:
/*-- what is this? I don’t even… --*/
. proxima-nova {
font-family: Arial, Helvetica, sans-serif;
}
Or you end up going through and replacing all the “proxima-nova” classes to “arial-font” in your HTML, which could be a huge chore.
It is also important to remember to not add any other font-family declarations to your style classes as those could override your Font Class.
Summary
- Stop declaring font-family on all over the place in your CSS — it’s not modular and it’s hard to maintain.
- Use font classes that are named by what they commonly represent, not the font-family name.
Next time, I will dive into the core of what Modular CSS is and how to use it. The number one rule is Modular!
We love hearing from you! Leave us your questions and comments below or tweet us @Pixafy!
