<div class="blogpost-body" id="cnblogs_post_body">
<div class="article_content csdn-tracking-statistics tracking-click" id="article_content">
<div class="htmledit_views">
<p><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;color:#663300;"><span style="line-height:22.1px;">好多盆友 非常纠结 css命名规则 怎么弄，还没起步就被绊住了。那么今天蝈蝈就针对这个问题来讨论一下 没什么技术</span></span></p>
<p><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;color:#663300;"><span style="line-height:22.1px;">含</span></span><span style="line-height:22.1px;color:rgb(102,51,0);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;">量。但却对效率开发至关重要的 “问题”。</span></p>
<p><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#663300;"><span style="line-height:22.1px;"><span style="font-size:18px;">下文是一些知乎大神的个人经验总结，假设认为实用请点赞 留言！</span></span><span style="font-size:13px;line-height:22.1px;"> </span></span></p>
<p><span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;color:#222222;"><span style="font-size:13px;line-height:22.1px;"> <span style="font-family:Tahoma;font-size:18px;line-height:35px;color:rgb(85,85,85);">JS前端实用开发QQ群 ：</span><span style="font-family:Tahoma;font-size:18px;line-height:35px;color:rgb(255,102,102);">147250970</span><span style="font-family:Tahoma;font-size:18px;line-height:35px;color:rgb(85,85,85);"> 欢迎添加~！</span></span></span></p>
<p><span style="color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.1px;">怎样看待 CSS 中 BEM 的命名方式？<br></span></p>
<p><span style="color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.1px;">BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由</span><a class="wrap external" href="https://link.zhihu.com/?target=http%3A//yandex.ru/">Yandex<span class="icon-external" style="vertical-align:0px;margin-left:4px;"></span></a><span style="color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.1px;">团队提出的一种CSS Class 命名方法。</span></p>
<br style="color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.1px;">
<p><span style="color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.1px;">相似于：</span></p>
<div class="highlight" style="line-height:1.5;color:rgb(34,34,34);font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;background:rgb(248,248,248);">
<pre style="font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;"><span class="nc" style="color:rgb(68,85,136);font-weight:700;">.block</span><span class="p">{}</span>
<span class="nc" style="color:rgb(68,85,136);font-weight:700;">.block__element</span><span class="p">{}</span>
<span class="nc" style="color:rgb(68,85,136);font-weight:700;">.block--modifier</span><span class="p">{}</span></pre>
<br style="color:rgb(34,34,34);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;line-height:16.3636px;">
<br style="color:rgb(34,34,34);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;line-height:16.3636px;">
<div class="zm-editable-content clearfix" style="color:rgb(34,34,34);font-family:Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;line-height:16.3636px;">
<span style="font-size:12px;">再烂的东西,假设真的毫无价值,是会立即被历史所淹没的<br><br> 每一个领域都有沉淀下来对特定开发人员在特定场景实用的东西<br> 非常赞同克军那句取其精华去其糟粕,何为精华,自己依据使用场景取舍<br><br> 可能大多数同学看到那么多下划线中划线以及那么长我靠还有驼峰的名字,就会认为混乱和不爽<br> 不爽是一个非常主观的词儿,他除了解决心理问题,没法解决生理问题<br><br> CSS这么多年并没有一个相对照较严谨的套路出来,宽松的写法导致团队成员写法各异,丢在页面都能跑起来,但混着做项目就不敢动或理不清别人写的代码<br> "这个CSS重写一遍比修改老文件快",这种念头差点儿全部人都曾有过.<br><br> 我们团队用BEM快1年,以下我来谈谈一些心得<br><br><strong>了解什么是 B.E.M</strong><br><br> Block<br> !误区:这个block并不是inline-block里的block,<br> 而是将全部东西都划分为一个<u>独立的模块</u>,一个header是block,header里嵌套的搜索框是block,甚至一个icon一个logo也是block<br> block能够相互嵌套<br><br> Element<br> !误区:假设一个Element-son是还有一个Element-father的子 |
|
转播
