How did I use css in SPA (BEM + SCSS + CSS properties order)

Tram Ho

Hello everyone, I have been writing css for a long time and my question is how to find and fix my css quickly and easily or in other words, how to Your css is most maintainable. Today I will introduce the way I have done with BEM and css properties order

Let’s get started

First you need to know what BEM is:

BEM stands for Block, Element, Modifier is a common naming convention for classes in HTML and CSS.

There are many articles written about BEM so I will just briefly mention about BEM, you can find it right at viblo or any blog.

Convention on BEM


Block refers to an html block with a common task, the highest level of an object

For example:

Block contains the details of a student



As part of the block, it makes no sense to stand alone

For example: student name, avatar


As a suffix, a flag marks a change in the shape, behavior, or state of a block or element.

For example: ( block modifier )

There are two types of students: fee-paying and non-paying students

For example: ( element modifier )

Students may be individual or not so we need to highlight their names to make them easily identifiable, for example

When combined with SCSS in SPA applications

Suppose we are coding a student’s detail screen, and using scss to style

You can clearly see that you want to access a part of the component to edit css completely easily when we determine their block, element and modifier. For example, if you want to correct the font color when the student is specific from red to blue for example, just look for the name and see the modifier immediately we know where to fix

CSS properties order

What are CSS properties orders: is that you order the css properties of an object when you style the object.

There are many different arrangements, for example: arbitrary (write whatever you like ….. like on my example above, I intentionally wrote messy order), according to the length , in groups , in alphabet . The most common way people use and recommend is to write in groups , that is, by functional group of those attributes

Also in the above example, I added a few properties and rearrange the order of attributes as follows:

You can see the following:

Position properties of an object we always write first: position, top, right … (position properties), then other things from outside to inside the object, for example distance relative to other objects margin, padding , to length, width, height then text font-size, font-weight, line-height, text-align , background-color, color and finally components. Less relevant and less used like cursor

You can refer to here


By the way, I also want to mention the problem that I encountered when writing CSS in BEM is that you use javascript to select a DOM object, it looks quite banana (document.querySelector (‘student__name – individual’)) , so I usually only apply to Vue projects, React uses sass, scss and we can use ref to query the DOM more easily.

These are the techniques I use when writing css in SPA applications using scss so that writing css, maintaining css is no longer a burden for you.

Hope the article helps you have a way to write and manage css class, properties more effectively.

Thank for your time (*  ̄3) (ε ̄ *)

Share the news now

Source : Viblo