Another one slippery thing to discuss in front-end, but really necessary one – is style.
It’s easy to write and work with css, less and sass, but it’s not so easy to make it readable, quick editable and scalable. So, to improve our work with styles we need to organize it properly.
To organize styles in projects I perfer smacss methodology.
Why smacss? It’s understandable, it saves your styles from cascade issues when you don’t need it, and it makes your html cleaner(BEM or Atom make it really dirty).
The main purpose in smacss – is to make your code modular and scalable, Scalable and Modular Architecture for CSS.
At the very core of SMACSS is categorization.
There are five types of categories:
- Base
- Layout
- Module
- State
- Theme
Now, lets try to describe what each of these categories mean.
Base
In base categorie we need to locate our basement styles (Yes, its not a joke:) All styles for html, body, links, lists, headers etc. are located here. Besides, I recomended to locate here normalize.css or bootstrap.
Layout
Layout is a huge parts of our page that we can visual separate from our design. And then it will contain our modules. So, here I recomend to write styles for blocks such as: header, content, wrapper, section, footer, nav etc.
PS: Also, for layout styles author of smacss recomend to use Ids and l-classname, but I think it’s not so necessary and use of Ids is really not cool
Module
Modules are parts of our page that includes layouts and also, they can be used in another layout. It’s not really understandable, but the main idea here is that the modules are parts of our layout. For example, you may have “nav” layout and in this layout you will have links modules + logo module + search field module. Or, if you have order list layout, you will have order-item module with button, price, description etc.
State
States are ways to describe how our modules or layouts will look when they are in a particular state. So, here we locate all media queries, all hover effects, effects that change over blocks via js-something and I prefer to locate animation keyframes here.
Themes
Finally, themes are used similarly as modules and states but, mostly, they are used for some special website views such as black friday site view or new year sales or something else, that isn’t used for usual website view.
So, for using smacss it would be better to divide our style into separate files. I perfer using Less, so I will tell you about it in Less topic. Let’s create our smacss files:
- base.less
- layout.less
- module.less
- state.less
- theme.less
Also, I prefere to add here another two files, that will help you work with less/sass:
- variables.less
- fonts.less
- global.less
Into vriables.less I write Less variables for font-sizing, main colors, main colors, fonts etc.
In fonts.less I import all fontfaces that will be used in website.
In global.less I perfer importing all less files in one for building one css file that I implement into html page so that the page looks this way:
@import ‘_fonts’;
@import ‘_variables’;
@import ‘_base’;
@import ‘_layouts’;
@import ‘_modules’;
@import ‘_states’;
Ok, now we know something about smacss, lets try to make some examples for better understanding what really happens here.
I will show you how to devide our design into smacss files. For example, lets try to do it with airbnb.com( they are really cool fellas, if you don’t know).
So, here we have main page:
Firstly, let’s do the easiest thing – write something in our variables.less file. As you see, airbnb design has some colors that we can save as variable, we have main background color: #f5f5f5, main font color: #484848, color for regular btns: #007a87, hover color for regular btns: #009aab, brand color: #ff5a5f, brand hover color: #ff7e82. So, in our variables.less it will look the following:
@main-bg: #f5f5f5;@main-color: #484848;
@regular-bg: #007a87;
@regular-hover-bg: #009aab;
@brand-bg: #ff5a5f;
@brand-hover-bg: #ff7e82;
After this, let’s talk a bit about our fonts.less. As I wrote before I use it just for implementation fonts into my styles via @fontface, so, here we have just lines like these:
@font-face {
font-family: ‘Helv-5’;
src: url(‘../fonts/Helv-5-Normal.ttf’);
…
}
And the last, the easiest part will be bse.less
In base.less we need to write some fundamental styles, the styles that we usually write in first string of our css. It looks like this:
* {box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
background: @main-bg;
}
li {
margin: 0;
padding: 0;
list-style: none;
}
a, a:link, a:hover, a:active, a:visited {
text-decoration: none;
…
}
Also I perfer to import into base.less normalize css and styles for btns, headers etc. that will be used everywhere in website. Yes, it would be better to locate btns styles in module.less , but in big projects it will be really hard to find these few strings for btns in this file.
Now, lets try to devide our page into layouts and to make well structured layout.less file:
It was easy, wasn’t it?) That’s what we do every time when we get new design from designer. But what exactly do we have to write into our layout.less file? Let’s write some examples for header and videoblock:
.header {
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: wrap;flex-flow: space-between;
height: 60px;
}
.videoblock {
position: relative;
height: 600px;
…
}
Ok, now it’s more than understandable. Now let’s try to write something into module.less. Firstly, as in a layout step, we need to devide our layouts into modules.
I make it this way:
Now let’s write it into our file:
.tools {
.logo {
line-height: 60px;
padding: 0 19px;
border-right: 1px solid #dce0e0;
}
.search {
height: 60px;
line-height: 60px;
input {
height: auto;
width: 100%;
padding: 19.5px 0 19.5px 48px;
border: 0;
outline: 0;
}
}
…
}
Its was the most difficull part of smacss, but it’s not a big deal for understand. So, what else do we need? – state.less, exactly!
As you have read most of my post, you can predict that here we will write states of our modules.
That’s why we need to write into state.less such styles that describe our btns, links, modules in different device views etc.
And, of cause example:
.btn-main: hover {
background: @brand-hover-bg;
cursor: pointer;
…
}
@media screen and (max-width: 600px) {html {
font-size: 14px;
line-height: 10px;
}
.main-btn {
padding: 6px 4px;
}
}
