如何写出优雅耐看的css代码？

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

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

/* 常规写法 */ .list{} .list .item{} /* BEM写法 */ .list{} .list__item{}

/* 常规写法 */ .list{} .list .item{} .list .item.active{} /* BEM写法 */ .list{} .list__item{}.list__item_active{}

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

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

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

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

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