This week was the first week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme.
I learned a lot over the past week and I would like to talk about the usage of BEM and SASS for styling in the code base for urbanCV.
Let’s first talk about BEM (Block. Element. Modifier), a type of naming methodology that helps with the understanding of the relationship between the CSS and HTML.
Using an example of a login form, .login-form is the Block, while anything with double underscores ‘’__” is our Element (ie. for children), such as .login-form__button, and finally anything with double dashes “–” is a Modifier, such as .login-form__button–small.
The beauty of it is that just by looking at the name .login-form__button–small, you are able to quickly get an idea of which element depends on another and you can easily guess its purpose.
Next, SASS (Syntactically Awesome Style Sheets) is a CSS extension language that is completely compatible with all versions of CSS and offers additional features, such as variable names, the ability to use nested syntax for better organisation and more.
By combining BEM and SASS, we are able to make the written CSS more structured and understandable for developers at a glance.
An example would be:
.login-form {
.login-form__textfield {}
.login-form__button {}
.login-form__button–dark {}
.login-form__button–small {}
}
As seen above, BEM naming is being used while also using SASS’s capability of having nested syntax to further improve the organisation of the written code by grouping all similar CSS related to the login-form together in a single block.
The code can be simplified even further with the ampersand syntax, ‘&’, to save the time of having to rewrite the parent selector over and over again, as seen below:
.login-form {
&__textfield {}
&__button {
&–dark{} // no longer need to write .login-form__button
&–small{}
}
}
