Why do you need namespaces

The reason we need namespaces is partly for extension, but the most important reason is that when we look at the code, we can easily and quickly understand what the individual functions and modules do. I think that’s the problem namespaces need to solve, which means that variable collisions can be picked up very quickly after a while or when someone picks up your code, which I think is really important.

BEM(block element modifier)

BEM classifies style names into three levels:

  • Block: corresponding module name, such as Dialog
  • Element: The node name of the corresponding module Confirm Button
  • Modifier: Indicates the node related state, such as Disabled and highlight

The class BEM ends up with is called dialog__confirm-button–highlight. The double symbols __ and — are used to distinguish them from the delimiters between words in the block.

The naming of BEM is very clear and very intuitive to help us understand exactly what style is applied to this element, very intuitive. But the disadvantage I feel is also very obvious between the team to use this naming standard, the level of direct decision to use the effect, such as when ELement is called item, if the two menus are very similar (may only be changed in position), is it necessary to use a naming Modifier to modify it, It was also expensive to use this way of naming (it was too long), and these factors made it too demanding for the development team to promote

Element – UI component name

Why doesn’t BEM satisfy us

For example

< div class = "info" > < a href = "#" > link < / a > < button class = "button" > detail < / button > < / div >Copy the code

Button color changes from red to blue and button distance link 10px CSS implementation

  1. Button add margin and background-color
  2. Button — Modifier add margin and background-color
  3. Button Add Margin, button– Modifier add background-color
  4. .info a add margin,.info. Button add mbackground-color
  5. .info a Add margin,button– Modifier add background-color

There are many cases even with BEM, which is why namespaces were introduced. It helps you create a structure that controls the writing of CSS properties. If you follow conventions, you’ll be able to write CSS without fear of side effects

Convert the above code into a code with a namespace. The HTML will be exactly the same (with a few class prefixes). Pay special attention to the.o and.c prefixes in this example:

< div class = "c - info" > < a href = "#" > link < / a > < button class = "o - button" > detail < / button > < / div >Copy the code

What do.o- and.c- stand for? From this code, I know that I can change the color of the.o-button if I want to, but I shouldn’t add any margins to the.o-button

Objects are context-independent

When I say objects are context-independent, I mean they don’t know where they will be used. You can pick any object and put it where you like without breaking the structure of your site.

This also means that the object should not change any external structure. Therefore, object blocks cannot contain any of these attributes/values:

  • Absolute and fixed positions.
  • margin
  • Padding (unless you use background-color. In this case, it does not break the alignment outside the object).
  • float.

And so on… Now that you know that objects need to be context-free, you immediately know that the. Button in our site-wide navigation example cannot contain any margins.

Object usage summary

Object (.o-) is the smallest building block of a website.

Objects have the following properties:

  • The object uses the. O – prefix
  • They cannot contain other objects or components
  • They are context-independent
  • Certain objects can be ignored with the. O – prefix if it makes sense

Component Summary

  • Components (.c-) are larger building blocks that you can use throughout your site

The component has the following properties:

  • Components use the ‘.c-‘ prefix
  • Components can contain other objects and components.
  • Components are context-aware

“Js” – JavaScript hooks

Javascript hooks (.js) indicate whether an object/component requires Javascript.

The advantage of using JavaScript namespaces is that you can separate JS functionality from styles, which makes them easier to maintain.

For example, you can see immediately from the.jscountdown class that.o-Countdown requires JavaScript to work properly. If I need to change o-countdown to c-countdown in the future, I don’t have to worry about breaking any JS functionality.

“.is-/.has- “– status class

The status class represents the current state of an object/component. When the status class is applied, you can immediately know if the object/component has a dropdown (.has-dropdown) or is currently in an open state (.is-open).

‘. T ‘or’. S ‘– Typography

The best practice in typography is to use only a few styles (size, font, etc.) on a web page

  • T1 – Maximum font size.
  • T2 – The second largest font size.
  • T3 – the third largest font size.
  • S1 – First font size Small base font size.
  • S2 – Second font size smaller base font size.

A typesetting class is a subset of an object that tells you the size of an element at a glance. You should apply the same set of rules to typesetting classes as you apply to arranging objects. This means that you should not add margin or padding to your typesetting class. Margin or padding should be added directly to the component.

“.u- “– Utility

Utility classes are a great helper class for representing styles. They do a good job and have a higher priority than other styles. Therefore, they usually contain only one attribute, and contain! Important statement.

summary

  • Classes must be added as little as possible to avoid HTML bloat
  • I have to know immediately if the component uses JavaScript
  • I need to know immediately if I can safely edit a class without affecting any other CSS
  • Do I have to immediately know what each class fits into to prevent brain overload
  • . L – : layout (layouts)
  • O – : object (objects)
  • C – : components (components)
  • .js: JavaScript hooks
  • . Is – |. Has – : state class (state classes)
  • . T1 |. S1: typesetting size (typography sizes)
  • .u-: utility classes

Each namespace has a function that can be implemented in the grand scheme of things, further reinforcing the hierarchy in the stylesheet

conclusion

Named no standard answer, but I set CSS namespace is very thing an engineer’s design capacity, as long as find the way that suits your team, can be based on the rapidly expand, it would be ok, of course team still need to find a solution everyone can compare common, so in the development, can more quickly, Work efficiently.

References:

  • CSS naming convention -BEM
  • Write modular CSS namespaces
  • More transparent UI code with namespaces
  • Manage typography on large applications