精华内容
下载资源
问答
  • css命名规范
    2022-04-28 15:13:55

    BEM 命名规范

     什么是 BEM 命名规范 

    Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。

    - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。

    -- 双中线 代表不同的状态,类型。

    __ 双下划线: 双下划线用来连接块和块的子元素

    _单下划线:单下划线用来描述一个块或者块的子元素的一种状态

    BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密。

    书写方式

    .block {} /** 代表了更高级别的抽象或组件。 **/
    
    .block__element {} /** 代表 .block 的后代,用于形成一个完整的 .block 的整体。 **/
    
    .block-name { }     /** 代表 .blocak 连字符  **/
    
    .block--modifier {} /** 代表 .block 的不同状态或不同版本。 ** /
    
    
    
    

    推荐写法

    .form { }
    .form--theme-xmas { }
    .form--simple { }
    .form__input { }
    .form__submit { }
    .form__submit--disabled { }
     
    //对应的HTML结构如下:
    <form class="form form--theme-xmas form--simple">
      <input class="form__input" type="text" />
      <input
        class="form__submit form__submit--disabled"
        type="submit" />
    </form>

    常用的css命名

    常用的CSS命名规则
    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体?丫挚矶龋?rapper
    左右中:left right center
    登录条:loginbar
    标志:logo
    广告:banner
    页面主体:main
    热点:hot
    新闻:news
    下载:download
    子导航:subnav
    菜单:menu
    子菜单:submenu
    搜索:search
    友情链接:friendlink
    页脚:footer
    版权:copyright
    滚动:scroll
    内容:content
    标签:tags
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    加入:joinus
    指南:guide
    服务:service
    注册:regsiter
    状态:status
    投票:vote
    合作伙伴:partner
    
    注释的写法:
    /* Header */
    内容区
    /* End Header */
    
    id的命名:
    1)页面结构
    
    容器: container
    页头:header
    内容:content/container
    页面主体:main
    页尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体?丫挚矶龋?rapper
    左右中:left right center
    
    (2)导航
    
    导航:nav
    主导航:mainnav
    子导航:subnav
    顶导航:topnav
    边导航:sidebar
    左导航:leftsidebar
    右导航:rightsidebar
    菜单:menu
    子菜单:submenu
    标题: title
    摘要: summary
    
    (3)功能
    
    标志:logo
    广告:banner
    登陆:login
    登录条:loginbar
    注册:register
    搜索:search
    功能区:shop
    标题:title
    加入:joinus
    状态:status
    按钮:btn
    滚动:scroll
    标?页:tab
    文章列表:list
    提示信息:msg
    当前的: current
    小技巧:tips
    图标: icon
    注释:note
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    投票:vote
    合作伙伴:partner
    友情链接:link
    版权:copyright
    
    注意事项::
    1.一律小写;
    2.尽量用英文;
    3.不加中??和下划线;
    4.尽量不缩写,除非一看就明白的单词。
    
     
    
    CSS样式表文件命名
    主要的 master.css
    模块 module.css
    基本共用 base.css
    布局、版面 layout.css
    主题 themes.css
    专栏 columns.css
    文字 font.css
    表单 forms.css
    补丁 mend.css
    打印 print.css

     

    更多相关内容
  • CSS命名规范(规则)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体佈局宽度:wrapper  左右中:left right center  登录...
  • CSS命名规范

    2019-03-19 09:51:10
    css一些标签的命名规范,作为前端的设计人员,对于CSS的接触,就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的常用的一些CSS规范
  • css命名规则

    2020-07-27 17:50:23
    推荐使用BME命名规则 BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。 命名约定的模式如下: .block{}/* 块 */ .block__element{}/* 元素*/ .block--...

    推荐使用BME命名规则
    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。
    命名约定的模式如下:

    .block{}/* 块 */
    .block__element{}/* 元素*/
    .block--modifier{}/* 修饰符 */
    
    • .block 代表了更高级别的抽象或组件。
    • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
    • .block–modifier代表.block的不同状态或不同版本。

    实例:

    <form class="site-search  site-search--full">
      <input type="text" class="site-search__field">
      <input type="Submit" value ="Search" class="site-search__button">
    </form>
    

    我们能清晰地看到有个叫.site-search的块,他内部是一个叫.site-search__field的元素。并且.site-search还有另外一种形态叫.site-search–full。

    命名规范

    1.使用有意义的或通用的ID和class命名:ID和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名。

    • /* 不推荐: 无意义 */ #yee-1901 {}
    • ./* 不推荐: 与样式相关 */ .button-green {}.clear {}
    • /* 推荐: 特殊性 */ #gallery {}#login {}.video {}
    • /* 推荐: 通用性 */ .aux {}.alt {}

    2.ID和class命名越简短越好,只要足够表达涵义。这样既有助于理解,也能提高代码效率。

    3.类型选择器避免同时使用标签、ID和class作为定位一个元素选择器;从性能上考虑也应尽量减少选择器的层级。

    • 规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _
    • 命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
    • 命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则
    • 不允许通过1、2、3等序号进行命名
    • 避免class与id重名
    • id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id
    • class用于标识某一个类型的对象,命名必须言简意赅。
    • 尽可能提高代码模块的复用,样式尽量用组合的方式。

    代码性能优化

    • 合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
    • 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
    • 注意选择器的性能,不要使用低性能的选择器。
    • 禁止在css中使用*选择符。
    • 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。
    • 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。
    • 如果是16进制表示颜色,则颜色取值应该大写。
    • 如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。
    • 如果没有边框时,不要写成border:0,应该写成border:none 。
    • 尽量避免使用AlphaImageLoader 。
    • 在保持代码解耦的前提下,尽量合并重复的样式。
    • background、font等可以缩写的属性,尽量使用缩写形式 。

    页面结构命名
    page:代表整个页面,用于最外层。
    wrap:外套,将所有元素包在一起的一个外围包,用于最外层
    wrapper:页面外围控制整体布局宽度,用于最外层
    container:一个整体容器,用于最外层
    head、header:页头区域,用于头部
    nav:导航条
    content:内容,网站中最重要的内容区域,用于网页中部主体
    main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容
    column:栏目
    sidebar:侧栏
    foot、footer:页尾、页脚。网站一些附加信息放置区域,(或命名为copyright)用于底部
    导航命名
    nav、navbar、navigation、nav-wrapper:导航条或导航包,代表横向导航
    topnav:顶部导航
    mainbav:主导航
    subnav:子导航
    sidebar:边导航
    leftsidebar 或 sidebar_a :左导航
    rightsidebar 或 sidebar_b:右导航
    title:标题
    summary:摘要/li>
    menu:菜单。区域包含一般的链接和菜单
    submenu:子菜单
    drop:下拉
    dorpmenu:下拉菜单
    links:链接菜单
    功能命名
    logo:标记网站logo标志
    banner:标语、广告条、顶部广告条
    login:登陆,(例如登录表单:form-login)
    loginbar:登录条
    regsiter:注册
    tool、toolbar:工具条
    search:搜索
    searchbar:搜索条
    searchlnput:搜索输入框
    shop:功能区,表示现在的
    icon:小图标
    label:商标
    homepage:首页
    subpage:二级页面子页面
    hot:热门热点
    list:文章列表,(例如新闻列表:list-news)
    scroll:滚动
    tab:标签
    sitemap:网站地图
    msg 或 message:提示信息
    current:当前的
    joinus:加入
    status:状态
    btn:按钮,(例如搜索按钮可写成:btn-search)
    tips:小技巧
    note:注释
    guild:指南
    arr、arrow:标记箭头
    service:服务
    breadcrumb:(即页面所处位置导航提示)
    download:下载
    vote:投票
    siteinfo:网站信息
    partner:合作伙伴
    link、friendlink:友情链接
    copyright:版权信息
    siteinfoCredits:信誉
    siteinfoLegal:法律信息
    CSS样式命名
    对齐样式命名:left(左边内容)、center(中间内容)、right(右边内容)等;
    颜色英文命名:red(红色)、green(绿色)、yellow(黄色),又或者border_red(红色边框)等;
    颜色代码命名:f00(红色)、ff0(黄色)、f90(橙色)等;
    文字大小命名:font12px(字体12像素)、font16px(字体16像素)等;
    页面线条命名:line_x (横线)、line_y (纵线)或 line_red(红线)、line_black(黑线)
    图片图标命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
    页面广告命名:ad_01、ad_02
    背景框架命名:nav_bg(代表导航条的背景图片位置)、tool_bg(代表工具栏的背景图片位置)
    CSS样式表命名
    index.css:单独为首页建立样式
    head.css:头部样式,多个页面头部设计风格相同时使用。
    base.css:共用样式。
    style.css:独立页面所使用的样式文件。
    global.css:页面样式基础,全局公用样式,页面中必须包含。
    layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中
    module.css:模块,用于产品类页,也可与其它样式配合使用。
    master.css:主要的样式表
    columns.css:专栏样式
    themes.css:主体样式
    forms.css:表单样式
    mend.css:补丁,基于以上样式进行的私有化修补。

    展开全文
  • 代码的优化是搜索引擎优化(seo)中一个很关键的步骤,为了符合SEO的规范,本文整理了一下目前流行的CSS+DIV的命名规则,感兴趣的朋友可以参考下哈,希望可以帮助到你
  • WEB前端开发规范文档+CSS命名规范 规范目的  为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发...
  • 常用的css命名规则

    2022-03-09 14:25:06
    layout.css 布局,版面 themes.css 主题 columns.css 专栏 font.css 文字、字体 forms.css 表单 mend.css 补丁 print.css 打印 CSS命名其它说明: DIV+CSS命名小结: 无论是使用“.”(小写句号)选择符号开头命名,...

    一、命名规则说明: 

    1)、所有的命名最好都小写
    2)、属性的值一定要用双引号("")括起来
    3)、给图片加上alt标签
    4)、尽量使用英文命名原则
    5)、尽量不缩写,除非一看就明白的单词

    二、相对网页外层重要部分CSS样式命名:

    外套 wrap ------------------用于最外层
    头部 header ----------------用于头部
    主要内容 main ------------用于主体内容(中部)
    左侧 main-left -------------左侧布局
    右侧 main-right -----------右侧布局
    导航条 nav -----------------网页菜单导航条
    内容 content ---------------用于网页中部主体
    底部 footer -----------------用于底部

    三、DIV+CSS命名参考表:   -   TOP

    CSS样式命名说明
    网页公共命名
    #wrapper页面外围控制整体布局宽度
    #container或#content容器,用于最外层
    #layout布局
    #head, #header页头部分
    #foot, #footer页脚部分
    #nav主导航
    #subnav二级导航
    #menu菜单
    #submenu子菜单
    #sideBar侧栏
    #sidebar_a, #sidebar_b左边栏或右边栏
    #main页面主体
    #tag标签
    #msg #message提示信息
    #tips小技巧
    #vote投票
    #friendlink友情连接
    #title标题
    #summary摘要
    #loginbar登录条
    #searchInput搜索输入框
    #hot热门热点
    #search搜索
    #search_output搜索输出和搜索结果相似
    #searchBar搜索条
    #search_results搜索结果
    #copyright版权信息
    #branding商标
    #logo网站LOGO标志
    #siteinfo网站信息
    #siteinfoLegal法律声明
    #siteinfoCredits信誉
    #joinus加入我们
    #partner合作伙伴
    #service服务
    #regsiter注册
    arr/arrow箭头
    #guild指南
    #sitemap网站地图
    #list列表
    #homepage首页
    #subpage二级页面子页面
    #tool, #toolbar工具条
    #drop下拉
    #dorpmenu下拉菜单
    #status状态
    #scroll滚动
    .tab标签页
    .left .right .center居左、中、右
    .news新闻
    .download下载
    .banner广告条(顶部广告条)
    电子贸易相关
    .products产品
    .products_prices产品价格
    .products_description产品描述
    .products_review产品评论
    .editor_review编辑评论
    .news_release最新产品
    .publisher生产商
    .screenshot缩略图
    .faqs常见问题
    .keyword关键词
    .blog博客
    .forum论坛

    CSS文件命名说明
    master.css,style.css主要的
    module.css模块
    base.css基本共用
    layout.css布局,版面
    themes.css主题
    columns.css专栏
    font.css文字、字体
    forms.css表单
    mend.css补丁
    print.css打印

    CSS命名其它说明:

    DIV+CSS命名小结

    无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的重要的特殊的最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

    通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
    、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

    DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。

    2.CSS样式文件命名如下

    主要的 master.css
    布局,版面 layout.css
    专栏 columns.css
    文字 font.css
    打印样式 print.css
    主题 themes.css

    头:header  top

    内容:content/container / main

    尾:footer  bottom

    导航:nav  navigation     navlist   subnav

    侧栏:sidebar

    栏目:column  cols

    页面外围控制整体布局宽度:wrapper

    左右中:left  right  center   navleft   headerleft

    登录条:loginbar    login

    标志:logo

    广告:banner

    页面主体:main

    热点:hot

    新闻:news   news_list 

    下载:download

    子导航:subnav

    菜单:menu

    子菜单:submenu

    搜索:search

    友情链接:friendlink

    页脚:footer

    版权:copyright

    滚动:scroll

    内容:content

    标签页:tab

    文章列表:list

    提示信息:msg   message 

    小技巧:tips

    栏目标题:title

    加入:joinus

    指南:guild

    服务:service

    注册:regsiter

    状态:status

    投票:vote

    合作伙伴:partner

    ()注释的写法:

    /* Footer */

    内容区

    /* End Footer */

    ()class的命名:

    (1)颜色:使用颜色的名称或者16进制代码,

    .red { color: red; }

    .f60 { color: #f60; }

    .ff8600 { color: #ff8600; }

    2)字体大小,直接使用”font+字体大小”作为名称,

    .font12px { font-size: 12px; }  .fz12px{}

    .font9pt {font-size: 9pt; }

    (3)对齐样式,使用对齐目标的英文名称,

    .left { float:left; }  .fl{float:left;}  .fr{float:right;}

    (4)标题栏样式,使用”类别+功能”的方式命名,

    .barnews { }

    .barproduct { }

    注意事项::

    1.一律小写;

    2.尽量用英文;

    3.不加中杠和下划线;

    4.尽量不缩写,除非一看就明白的单词.

    主要的 master.css

    模块 module.css

    基本共用 base.css / common.css / static.css

    布局,版面 layout.css

    主题 themes.css

    专栏 columns.css

    文字 font.css

    表单 forms.css

    补丁 mend.css

    打印 print.css

    展开全文
  • CSS命名规范--BEM

    2022-05-16 09:35:18
    在阅读element时,发现其CSS命名采用BEM的风格,于是去查阅BEM是什么... 我的理解:BEM是命名规范 BEM的意思就是块(block)、元素(element)、修饰符(modifier) 主要问题是CSS类名中“--”和“__”是什么意思...

    在阅读element时,发现其CSS命名采用BEM的风格,于是去查阅BEM是什么...

    我的理解:BEM是命名规范

    BEM的意思就是块(block)、元素(element)、修饰符(modifier)

    主要问题是CSS类名中“--”和“__”是什么意思?

    __(两个短横线)表示某一个块的后代元素

    --表示某一个块的不同状态或版本

    .block{}       block块
    .block__element{}     block块下的元素
    .block--modifier{}        block块的不同状态或版本

    示例

    <form class="site-search  full">
      <input type="text" class="field">
      <input type="Submit" value ="Search" class="button">
    </form>	

    用BEM风格改写如下

    <form class="site-search  site-search--full">
      <input type="text" class="site-search__field">
      <input type="Submit" value ="Search" class="site-search__button">
    </form>	

    我理解的块的不同状态或版本就是一个块有不同的类名

    参考原文如下:

    CSS命名规范——BEM思想(非常赞的规范)_大奋齐的博客-CSDN博客_bem命名规范icon-default.png?t=M4ADhttps://blog.csdn.net/chenmoquan/article/details/17095465

    展开全文
  • css 命名规范

    2020-10-31 03:31:56
    css 命名规范
  • 常用的CSS命名规范

    2020-06-16 21:51:53
    CSS命名由小写的英文单词或组合命名,单词与单词之间通过“-”连接,常用的CSS命名规范有文本命名规范,页面结构命名规范,导航命名以及功能命名等。 1.页面结构 页头:header 页面主体:main 内容:...
  • 简评:Debug CSS 是一种很耗时的操作,如果有良好的命名规范可以节约很多的 Debug 时间。 使用连字符(’-‘)分隔字符串 你可能习惯了在 Javascript 中使用小驼峰的命名方式: var redBox = document....
  • CSS命名规则  头:header  内容:content/containe  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left  right  center  登录条:loginbar  标志...
  • CSS命名规则

    2012-09-01 20:55:33
    经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名规范会产生不同样式.. 一、关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到:标识符(包括...
  • web前端+css命名 规范

    2016-05-10 09:35:22
    web前端+css命名 规范
  • CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中...
  • 前端css命名规范

    2021-08-05 04:47:51
    1,10命名规范如何命名• css最好用class来命名,js用id来命名,已做区分• id和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名命名示例.div1{} /* 不推荐;无意义 */.a_green{} /* 不推荐...
  • DIV+CSS命名规范全记录

    2021-01-19 20:50:39
    我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。  命名规则说明:  1)、所有的命名最好都小写  2)、属性的值一定要用双引号()...
  • 资源名称:WEB前端开发规范文档 CSS命名规范 中文WORD版内容简介: Web前端开发,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发...
  • CSS命名规范参考及书写注意事项,这里整理的比较全,web前端开发的朋友非常值得参考下。
  • 前端人员必看CSS命名规范

    千次阅读 2018-07-23 17:02:08
    所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS...
  • CSS命名与书写规范

    千次阅读 2022-04-18 16:54:43
    命名与书写规范 引入css的三种方式 1.内联样式,在HTML元素中使用"style" 属性。 当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在标签中使用样式属性,样式属性可以是任何 CSS 属性...
  • 常用CSS命名规范:

    千次阅读 2021-12-30 21:22:43
    布局时--常用CSS命名规范

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,647
精华内容 33,458
关键字:

css命名规范

友情链接: GA.zip