• CSS命名规范整理


    基于网易NEC修改后,整理的命名规范

    单行写完一个选择器定义

    便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。

    如果有嵌套定义,可以采取内部单行的形式。

     

    分类的命名方法:使用单个字母+"-"为前缀

    布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。

     

    相同语义的不同类命名

    方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。

    模块和元件的扩展类的命名方法

    当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

    方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。

    补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。

     

    选择器等级

    1吨 = 行内样式style。

    100斤 = ID选择器。

    1斤 = 类、伪类和属性选择器。

    1克 = 类型选择器和伪元素选择器

     

    统一语义理解和命名

    语义     命名
    文档     doc
    头部     head
    主体     body
    尾部     footer
    主栏     main
    主栏子容器    main-in
    侧栏     aside
    侧栏子容器   aside-in
    盒容器     wrap/box

    布局(.g-)

    语义

    命名

    文档

    doc

    头部

    head

    主体

    body

    尾部

    footer

    主栏

    main

    主栏子容器

    main-in

    侧栏

    aside

    侧栏子容器

    aside-in

    盒容器

    wrap/box

    模块(.m-)、元件(.u-)

    语义

    命名

    导航

    nav

    子导航

    subnav

    面包屑

    crumb

    菜单

    menu

    选项卡

    tab

    标题区

    head/title

    内容区

    body/content

    列表

    list

    表格

    table

    表单

    form

    热点

    hot

    排行

    top

    登录

    login

    标志

    logo

    广告

    advertise

    搜索

    search

    幻灯

    slide

    提示

    tips

    帮助

    help

    新闻

    news

    下载

    download

    注册

    regist

    投票

    vote

    版权

    copyright

    结果

    result

    标题

    title

    按钮

    button

    输入

    input

  • 相关阅读:
    JQ对JSON的增删改
    Debug编辑通过转Release找不到命名空间
    Codeforces Round #740(Div. 2)
    2021“MINIEYE杯”中国大学生算法设计超级联赛(10)
    2021“MINIEYE杯”中国大学生算法设计超级联赛(8)
    Codeforces Round #737 (Div. 2)
    2021“MINIEYE杯”中国大学生算法设计超级联赛(7)
    2021牛客暑期多校训练营8
    2021牛客暑期多校训练营7
    2021“MINIEYE杯”中国大学生算法设计超级联赛(6)
  • 原文地址:https://www.cnblogs.com/Megasu/p/4153482.html
Copyright © 2020-2023  润新知