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
1 2 3 4 5 | .block {} /* Block */ .block__element {} /* Element */ .block--modifier {} /* Block Modifier */ .block__element--modifier {} /* Element Modifier */ |
Block
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
1 2 3 4 | <div class="student"> ... </div> |
CSS
1 2 | .student {...} |
Element
As part of the block, it makes no sense to stand alone
For example: student name, avatar
1 2 3 4 5 6 7 8 | <div class="student__name"> ... </div> <div class="student__avatar"> ... </div> |
Modifier
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
1 2 3 4 5 6 7 8 | <div class="student student--paid"> ... </div> <div class="student student--free"> ... </div> |
For example: ( element modifier )
Students may be individual or not so we need to highlight their names to make them easily identifiable, for example
1 2 3 4 | <div class="student__name--individual"> ... </div> |
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
Conclusion
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) (ε￣ *)