bem

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 nature of CSS. So the default background is overwritten by the modifier successfully. But if I put the

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" approach, I could drag my widget from the content area to the footer and the colours would simply work

利用browser-sync实时刷新页面 为了省去每次修改代码后都要手动刷新页面，我习惯使用 browser-sync 监听文件，自动刷新浏览器 1. 安装Browsersync npm install -g browser-sync 2. 运行Browsersync browser-sync start --server --files index.html --files "css/*.css" 引入normalize.css Normalize.css ，保证默认元素在不同浏览器上变现一致。 Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。—— 来，让我们谈一谈 Normalize.css 导航 页面 根据设计稿，我们把整个页面分为三个部分，头部、内容区域、页脚 <header class = "site__header"> </header> <main class = "site__main"> </main> <footer class = "site__footer"> </footer> 用 BEM 作为CSS的命名规范，虽然site__header丑了点，但是在你代码越来越多的时候

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 ? 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: Block: menu Element: item Modifier(s): horizontal, vertical And by following standard BEM conventions, you would

推荐阅读： https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 - 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：双下划线用来连接块和块的子元素 -- 双中划线：双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 1.1 BEM 命名模式 BEM 命名约定的模式是： .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间（前缀） block 代表了更高级别的抽象或组件。 block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。 block--modifier 代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。 来源： https://www.cnblogs.com/amiezhang/p

I'm using Sass 3.4.1 and BEM so my scss is: .photo-of-the-day{ &--title{ font-size: 16px; } } and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css: .photo-of-the-day:hover .photo-of-the-day--title{ font-size:12px } the thing is using BEM this is the only way I found and looks kinda ugly .photo-of-the-day{ &--title{ font-size: 16px; } &:hover{ background: red; /* this is ugly */ .photo-of-the-day--title{ text-decoration: underline; } } } so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to