BEM代表 “块(block),元素(element),修饰符(modifier)”。好处:摆脱特异性的困扰修复继承问题停止担心命名在选择器中,由以下三种符号来表示扩展的关系:中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线:双下划线用来连接块和块的子元素_ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 。/* 常规写法 /.list{} 块.list .item{} 元素/ BEM写法 /.list{}.list__item{}“修饰符”可以理解为一个块的特定状态!/ 常规写法 /PricingContact/ BEM写法 */选中的块里元素 PricingContactCSS命名原则:1.短命名比长命名好:缩短书写时间// 推荐.some-intro{…}2.组合命名比单命名好:明确关系,便于查找位置// .cs-header{…}面向属性命名&面向语义命名面向属性的命名指选择器的命名是跟着具体的CSS样式走的,与项目、页面、模块统统没有关系。例如,比较经典的清除浮动类名.clearfix:.clearfix:after { content : ‘’; display: table; clear: both; }优点:在于CSS的重用率高,性能最佳,即插即用,方便快捷,开发也极为迅速,因为它省去了大量在 HTML 和CSS文件之间切换的时间。缺点:在于由于属性单一,其适用场景有限,另外因为使用方便,易被过度使用,从而带来更高的维护成本。面向语义的命名则是根据应用元素所处的上下文来命名的。例如:.header { background-color: #333; color: #fff; }.logo {font-size: 0; color : transparent;上述两种命名方式各有优缺点:优点是应用场景广泛,可以实现非常精致的布局效果,扩展方便;缺点:在于代码啰唆,开发效率一般,因为所有HTML都需要命名,哪怕是一个10像素的间距。这就导致很多开发者要么选择直接使用标签选择器,要么就选择一个简单的类名,然后通过父子关系限定样式,结果带来了更糟糕的维护问题。css 命名推荐状态:前一个 prev后一个
next当前的
current显示的
show隐藏的
hide打开的
open关闭的
close选中的
selected有效的
active默认的
default反转的
toggle禁用的
disabled危险的
danger主要的
primary成功的
success提醒的
info警告的
warning出错的
error大型的
lg小型的
sm超小的
xs布局:文档 doc头部 header(hd)主体 body尾部 footer(ft)主栏 main侧栏 side容器 box/container通用:列表 list列表项 item表格 table表单 form链接 link标题 caption/heading/title菜单 menu集合 group条 bar内容 content结果 result组件:按钮 button(btn)字体 icon下拉菜单 dropdown工具栏 toolbar分页 page缩略图 thumbnail警告框 alert进度条 progress导航条 navbar导航 nav子导航 subnav面包屑 breadcrumb(crumb)标签 label徽章 badge巨幕 jumbotron面板 panel洼地 well标签页 tab提示框 tooltip弹出框 popover轮播图 carousel手风琴 collapse定位浮标 affix语义化小部分:品牌 brand标志 logo额外部件 addon版权 copyright注册 regist(reg)登录 login搜索 search热点 hot帮助 help信息 info提示 tips开关 toggle新闻 news广告 advertise(ad)排行 top下载 download功能部件:左浮动 fl右浮动 fr清浮动 clear
引用:https://juejin.cn/post/7126505567408881677
BEM是一种CSS命名规范
最新推荐文章于 2023-07-27 16:05:46 发布