• 技术文章 >web前端 >css教程

    如何写出优雅耐看的css代码?css命名小技巧分享!

    青灯夜游青灯夜游2022-09-15 19:46:46转载232
    如果使用 CSS 有一段时间,那么您就会知道继承、特异性和命名是一些最难处理的事情。由于所有 CSS 都是全局的,随着代码库的增长,防止样式相互冲突并导致意外副作用变得越来越困难!下面本篇文章给大家分享一些css命名小技巧,让我们的代码优雅又耐看,希望对大家有所帮助!

    大前端零基础入门到就业:进入学习

    CSS命名——BEM

    BEM是什么

    BEM是一种CSS命名规范。【推荐学习:css视频教程

    BEM代表 “块(block),元素(element),修饰符(modifier)”。

    在选择器中,由以下三种符号来表示扩展的关系:

    -   中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
    __  双下划线:双下划线用来连接块和块的子元素
    _   单下划线:单下划线用来描述一个块或者块的子元素的一种状态

    使用BEM示例对比

    Block

    如下面的例子,li.item 是列表的一个子元素

    /* 常规写法和BEM写法相同 */
    .list

    元素(Element)

    /* 常规写法 */ 
      <ul class="list">
        <li class="item">Pricing</li>
        <li class="item">Contact</li>
      </ul>
      
    /* BEM写法 */   
       <ul class="list">
        <li class="list__item">Pricing</li>
        <li class="list__item">Contact</li>
      </ul>
    /* 常规写法 */ 
    .list{} 
    .list .item{} 
    
    /* BEM写法 */ 
    .list{} 
    .list__item{}

    修饰符(modifier)

    一个“修饰符”可以理解为一个块的特定状态!

    /* 常规写法 */ 
      <ul class="list">
        <li class="item">Pricing</li>
        <li class="item">Contact</li>
      </ul>
      
    /* BEM写法 */   
      <ul class="list">
        <li class="list__item_active">
          Pricing
        </li>
        <li class="list__item">Contact</li>
      </ul>
    /* 常规写法 */ 
    .list{} 
    .list .item{} 
    .list .item.active{} 
    
    /* BEM写法 */ 
    .list{} 
    .list__item{}
    .list__item_active{}

    BEM 的好处

    css命名几大原则

    短命名比长命名会更好

    因为短命名缩短书写时间,也减小了css文件大小!例如这个例子:

    //  推荐
    .some-intro{...}
    
    // 不推荐
    .some-introduction{...}

    组合命名比单命名会更好

    // 不建议
    .header{...}
    
    //推荐
    .cs-header{...}

    面向属性的命名和面向语义的命名

    面向属性的命名指选择器的命名是跟着具体的CSS样式走的,与项目、页面、模块统统没有关系。例如,比较经典的清除浮动类名.clearfix:

    .clearfix:after { content : ''; display: table; clear: both; }

    面向语义的命名则是根据应用元素所处的上下文来命名的。例如:

    .header { background-color: #333; color: #fff; }
    .logo {font-size: 0; color : transparent;}

    上述两种命名方式各有优缺点:

    1、面向属性

    2、面向语义

    命名汇总推荐

    状态

    前一个    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

    命名网站推荐

    codelf:https://unbug.github.io/codelf

    参考文档:

    1、张鑫旭的《css选择世界》

    2、https://www.cnblogs.com/qianxiaox/p/13816077.html

    (学习视频分享:web前端

    以上就是如何写出优雅耐看的css代码?css命名小技巧分享!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:一文聊聊 9 个冷门的css属性 下一篇:总结分享几个借助 CSS 来更好的控制定时器的方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 看看CSS如何利用计数器来实现长按点赞累积动画• CSS mask-composite高级技巧:单张图片的任意颜色转换• css中的选择器包括超文本标记选择器吗• 巧用CSS实现鼠标跟随 3D 旋转效果,让交互更加生动!• 巧用 CSS混合模式 让文字智能适配背景颜色• CSS技巧分享:纯CSS实现表格响应式布局
    1/1

    PHP中文网