NOC Diary Week 1: Usage of BEM and SASS

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{}

  }

}

Marcus Tang
Marcus Tang
Marcus is a 2nd year computing student at the National University of Singapore. He has great passion in Computing and both Frontend and Backend engineering.

Latest posts

Django Periodic Task with Celery Task Queue

Task Queue? Periodic Tasks? What are they? Task Queue is a way of organizing work or tasks in programs asynchronously, without a user’s request, and distribute...

Understanding Models, Views and Serializers in Django

Soo we are back once again this week, talking about models, views and serializers — essentially everything you will need to get an up-and-running...

Creating a Django Web Application with a PostgreSQL Database on Windows

At some point in time, you will foray into the realm of web development. With the many frameworks out there, you may be confused...

More from author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related posts