bem | 易学教程

BEM block, naming & nesting

阅读更多关于 BEM block, naming & nesting

问题 I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see. I have a sidebar nav and a content nav. My sidebar nav looks like this <div class="sidebar"> <ul class="sidebar__nav"> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> </ul> </div> And my content nav looks like this <div class="content"> <ul class="content__nav"> <li class="nav__item"><a

有关前端BEM命名方式的思考

阅读更多关于有关前端BEM命名方式的思考

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最初的思考思考来源于要给切图网 qietu.com 改一次版，作为前端开发服务商，我觉得应该要有自己的一款前端CSS框架，并且这个框架不应该只是随便写写，最好能够用在官网上，拿官网做背书，于是在研究了火狐、adobe、微软、google amp等官网以后，写了一款quickly.css响应式前端框架并且开源，并且用在了新版网站上。问题？在写框架的时候，定义了这么一个类 .card 它可以用在很多场合。然后 .card 下面定义了几个子元素，如下： .card-head {} .card-body{} .card-foot{} 然后.card 本身还有很多种状态，以灵活的适应不同的场合，如下 .card-border{} /*带边框的*/ .card-shadow{} /* 带阴影的*/ .card-colorful{} /*彩色的*/ 那么实际的运用是这样的： <div class="card card-colorful card-shadow"> <div class="card-head"> </div> <div class="card-body"> </div> </div> 综上可以发现，一般人在使用的时候很难搞清楚 .card-colorful 和 .card-body 有什么区别，

Why doesn't css selector - 'begins with' allow double-dash at end?

阅读更多关于 Why doesn't css selector - 'begins with' allow double-dash at end?

问题 In writing CSS I use BEM methodology and I've found using the CSS selector 'begins with' - [class^="classname"] very useful. This is especially true when declaring styles for modifiers, i.e. .block__element--modifier . Therefore when writing CSS rules I would like to use [class^="block__element--"] to target specific elements regardless of their modifier. However, I've noticed the double-dash at the end of the selector fails to target the elements. A single dash however will work. I've had a

How to specify state with BEM?

阅读更多关于 How to specify state with BEM?

问题 Using BEM CSS class syntax, lets say I have an element with the following class: ... <div class="purchase__module2__heading__tooltip">...</div> ... Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes: ... <div class="purchase__module2__heading__tooltip--active">...</div> ... or do I add it ... <div class="purchase__module2__heading__tooltip purchase_

Can we make an element of block modifier in BEM?

阅读更多关于 Can we make an element of block modifier in BEM?

问题 I just wanted to know whether the following code follows BEM methodology best practices? Creating an element for the block modifier i.e. in this case "block--mod" is a modifier for the "block" block. Is it allowed to create a nested element with this pattern: "block--mod__elm". <div class="block block--mod"> <div class="block__elm block--mod__elm"> </div> 回答1: In situations like theming or similar I would use nested selectors. This saves some classes in your HTML and as @Jonathan Nicol said

Appropriate use of BEM in CSS

阅读更多关于 Appropriate use of BEM in CSS

问题 I'm an old hand with CSS, but have recently decided to take the plunge and begin using BEM. For the most part, I understand the value of using such a flat system, avoiding overly specific selectors etc... My question is, is the following approach correct. It works, technically, but also seems fragile: .badge { /* additional declarations */ background: rgba(0, 0, 0, 0.2); } .badge--error { background: red; } .badge--success { background: green; } This works fine, because of the cascading

Are SMACSS, BEM and OOCSS not as portable?

阅读更多关于 Are SMACSS, BEM and OOCSS not as portable?

问题 SO I have a problem with OOCSS. It is supposed to be more portable but compared to how I usually do things, I'm finding it less so. My example: I have a widget testimonial. In the main content body (which has a white background) the testimonial has a black font. But in the footer (which has a blue background) the testimonial needs a white font. Before OOCSS, I would do something like this: #main-content .testominial { color: #000000; } #footer .testominial { color: #FFFFFF; } With this "old"

What is BEM methodology?

阅读更多关于 What is BEM methodology?

问题 I recently heard about BEM methodology. What exactly is the use of BEM methodology ? In what way does BEM make our work easier ? Is it a good practice to use BEM ? 回答1: BEM is a naming methodology. It stands for Block Element Modifier and it's aim is to facilitate modularity and make styles and classes a lot easier to maintain. It's not easy to explain it in a reply, but I can give you the basic idea. So if you're thinking of a menu, then the whole element / component structure would be:

Is it possible to include the parent properties in an extended Sass class?

阅读更多关于 Is it possible to include the parent properties in an extended Sass class?

问题 I'd like to implement something like the BEM model in my Sass library. But I'm struggling to find a clean way to do this. For example, I'd like to declare a 'base' style for a common element, and then extend it with useful variations: .container { margin: 10%; background: #eee; &-featured { border: 2px solid #999; } } The problem here is that the generated .container-featured class only contains the border property—Sass doesn't include the margin and background from its 'parent' class. So you

SASS throws an error for BEM syntax

阅读更多关于 SASS throws an error for BEM syntax

问题 I'm just trying to use the "modifier" and "element" BEM syntax in SASS. .second-title{ background-color:green; &--touched{ background-color:black; } &__left{ background-color:red; } } The CSS file compiles correctly but when I try to run "grunt serve" compass throws the following error: Syntax error: Invalid CSS after \" &-\": expected number or function, was \"-touched{\"\A on line 71 of D:/webdev/angularjs/ang-snapscan/app/styles/mobilestyle.scss"; 回答1: In order to use the parent selector