存储架构

How the BEM CSS Naming Scheme Can Improve Vue.js Component Architecture

微信扫一扫,分享到朋友圈

How the BEM CSS Naming Scheme Can Improve Vue.js Component Architecture
0

In todays quick tip we’ll take a look at how the BEM CSS naming scheme can be quite useful to detect when it might be better to split up a large component into multiple smaller ones.

Let’s say you have a component for displaying a list of the latest articles of your blog in a grid layout.

  

Latest articles

  • {{ article.headline }}

    {{ article.intro }}

In this simplified example of a LatestArticles
component, we can see a pattern emerge: the Element
part of the class names is prefixed (e.g. LatestArticles__list-item
and LatestArticles__list-headline
). In the first example, you might think about simply removing the prefix and defining a class name like LatestArticles__item
but a name like that might be too generic and as we can see with the class LatestArticles__list-headline
this approach won’t work, because we already have a class named LatestArticles__headline
.

Prefixing class names like that, might be a good indicator for when it’s time to refactor your component and splitting it up into multiple smaller components might be a good idea.

  

Latest articles

  
  • {{ article.headline }}

    {{ article.intro }}

Not only does this approach prevent you from running out of class names, but it also makes it possible to reuse the ArticleList
component in other places without having to duplicate any of the CSS.

Wrapping it up

In the days of scoped styles or even CSS in JS, following the BEM naming scheme might not seem to be necessary anymore. But I’d argue that there is still a lot to be gained by following this battle tested approach for structuring your CSS. Having an indicator when to split up your components into multiple smaller ones, is one of the benefits of this approach which may not be the first thing that comes to mind when you think about BEM.

阅读原文...


Markus Oberlehner

在spring-bootrestapi中传递和验证RequestParam

上一篇

Fixing a Bug

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
How the BEM CSS Naming Scheme Can Improve Vue.js Component Architecture

长按储存图像,分享给朋友