Lorem ipsum dolor sit amet, consectetur Adipiscing elit. Pellentesque amet 这意味着所有的后代元素只会收到card模块的影响,所有我们可以将img移动到c-card_header里面去或者添加c-card_footer不会影响语义结构。 2. 应该添加命名空间吗? 你可能已经注意到了我在代码示例中使用了c- 字母。这个c代表’comp...
例如,.dyui-btn__play表示播放按钮,.dyui-btn__mute表示静音按钮。 image.png 如何使用 BEM 规范命名? 在编写代码时,我们应该遵循以下几个原则: 使用语义化的命名:命名应该清晰、具有描述性,能够准确地表达元素的作用和含义。 避免嵌套过深:尽量保持命名的简洁明了,不要过度嵌套,以免造成不必要的复杂性。 使用...
Lorem ipsum dolor sit amet, consectetur Adipiscing elit. Pellentesque amet 这意味着所有的子元素都仅仅会被card块影响。所以,我们可以将文本和图片移动到c-card__header,甚至在不破坏语义结构的情况下添加一个c-card__footer元素。 2. 我应该使用命名空间吗? 现在,你可能已经注意到我的代码示例中使用了...
之前我说过,我找到一个最好用的跨组件类名的解决方式。 Title text hereLorem ipsum dolor sit amet, consecteturAdipiscing elit. Pellentesque.<!--My *old* cross-component approach-->Click me! 这就是BEM官网上著名的“mix”。但是,参考了一些从Esteban Lussich的评价之后,我改变了对这种方式的看法...
Welcome to Foo CorpFoo Corp is the best, seriously! 光从上面的代码来看,我们根本不明白.media和.alpha两个class彼此之间是如何相互关联的?同样我们也无从知晓.body和.lede之间,或者.img-rev 和.media之间各是什么关系?从这段HTML(除非你对那个media对象非常了解)中我们也不知道这个组件是由什么组成的和它还有...
--错误:不能单独使用lg修饰器-->搜索<!--块中可嵌套着另一个块--> 在样式文件中,仅以类名作为选择器,不使用ID或标签名来约束选择器,且CSS(或者SCSS编译后的CSS)中的选择器嵌套不超过2层,增加效率和复用性,减少选择器之间的耦合度 比较常见的嵌套情景:需要通过块状态对内部...
background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 多字段list数据循环 //sass 样式 $animal-data: (puma, black, default),(sea-slug, blue, poi...
Paste_Image.png 4. BEM entity(BEM 实体) Block,element 和 modifier 合起来就被成为 BEM entity。它是一个 既可以用来指代单独的 BEM 实体又可以作为 block、element 和 modifier 的总称的 概念。 5. Mix(混合体) Mix 是被托管在(being hosted on)一个单独的 DOM 节点上的 不同 BEM 实体(混合而成)的...
Lorem ipsum dolor sit amet, consectetur Adipiscing elit. Pellentesque. <!-- Our nested button component --> Click me! However, what happens when there are a few subtle styling differences — for example, we want to make it a bit smaller, with fully rounded corners, but only w...
10. 11. 12. .qf-rate{ width: 300px; height: 40px; display: flex; justify-content: center; align-items: center; } .qf-rate__item{ width: 48px; height: 48px; cursor: pointer; background: url('./img/star.png'); } .qf-rate__item--active{ ...