发布网友 发布时间:2022-04-24 14:34
共4个回答
懂视网 时间:2022-05-12 16:56
对如新手来说写html时给html标签加样式命名都很头疼,不知道该给标签起啥名,或者就随便起名,这在日常的开发中很不方便,今天就给大家总结一下html里的class命名规范吧!常见class关键词:
布局类:header, footer, container, main, content, aside, page, section
包裹类:wrap, inner
区块类:region, block, box
结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类:list, item, field
主次类:primary, secondary, sub, minor
大小类:s, m, l, xl, large, small
状态类:active, current, checked, hover, fail, success, warn, error, on, off
导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星级类:rate, star
分割类:group, seperate, divider
等分类:full, half, third, quarter
表格类:table, tr, td, cell, row
图片类:img, thumbnail, original, album, gallery
语言类:cn, en
论坛类:forum, bbs, topic, post
方向类:up, down, left, right
其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
有了关键词之后,我们先来制定一些简单的规则。
制定简单规则:
以中划线连接,如.item-img
使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词,参考上面的关键词,如.active, .checked
图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名)。
模块采用关键词命名,如.slide, .modal, .tips, .tabs,特殊化采用上面两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
js操作的类统一加上js-前缀
不要超过四个class组合使用,如.a.b.c.d
修饰关键词:
以header为例,我们可以添加前缀表示不同的header,如区块头部.block-hd(hd为header简写),modal头部.modal-hd,文章头部.article-hd。
同样标题也可以分为,页面标题.page-tt(title的简写),区块标题.block-tt等。
同样,这给我们提出了第二个问题,如果要特殊化某个class该怎么办?
特殊化class:
以上面的tt为例,大概有三种办法:
第一种犯法:直接修改class,将.page-tt修改成.page-user-tt(可以采用scss的%先定义共用的代码)。
第二种办法: 追加class特殊化,根据我们上面定义的规则,在.page-tt上追加一个class成为.page-tt.page-tt--user,注意.page-tt--user不是一个的class,它使基于.page-tt这个基础上的。
第三种办法: 使用父类,给一个范围,于是形成.page-user .page-tt。
一般我们使用的是第二种和第三种办法,因为这两种都有共同的.page-tt,可以比较方便控制一些基础共有的样式。
由第三个通过父类控制的办法,我们进入第三个要讨论的问题,层级结构
层级
最适合层级的例子莫过于ul>li结构了,如下面的结构:
<ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>
一般来说我们也有两种办法定义层级,第一种为继承式,第二种为关键词式。
// 继承式 ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text // 关键词式 ul.card-list li.item a.field-img-link>img.field-img h3.field-tt>a.field-tt-link p.field-text
由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的list,而li的子元素接着li的item;至于关键词式则完全由关键词来表示层级,list>item>filed正好构成三层等级。
最后由我们的层级进入我们最后一个问题,如何控制样式的范围。
相关推荐:
class与id有什么区别
html中规定元素的类名的属性class
css如何使用id与class来控制元素样式的实例分析
热心网友 时间:2022-05-12 14:04
一、Java程序,包名:Package的名字应该都是由小写单词组成,如:text.demo.example
具体的示例如下:
com.icss下面为平台包。stmacmbas为本项目的根程序包。
stmacmbas.base为本项目的开发基础包。
stmacmbas.commerce为商业企业程序包。
stmacmbas.example为示例程序包。
stmacmbas.instry为工业企业程序包。
stmacmbas.stma为国家局程序包。
stmacmbas.util为工具包。
二、文件名。
1. 文件名由英文单词组成,每个单词的首字母大写,最好不要超过4个单词,如:ShipOrder.java。
2. Java文件的文件名要与程序中的public类名相同。
3. Servlet文件要以Servlet作为结尾,如:AddCompanyServlet.java。
三、类名:每个单词的首字母大写。同上。
四、变量名。
1. class变量的命名:变量的名字必须用一个小写字母开头,后面的单词用大写字母开头。
2. static final变量的命名:static final变量的名字应该都大写并且指出完整含义。
3. 用有意义的名字命名变量:首先,用完整的英语单词或约定俗成的简写命名变量(不允许用汉语拼音),如:firstName,zipCode。
4. 用复数命名Collection类变量。Collection包括数组,vector等。命名时使用复数:customers, classmates。
五、方法名。
1. 方法的名字必须用一个小写字母开头,后面的单词用大写字母开头。
2. 方法的名字要与该方法的用途相关。
六、参数名。
1. 参数的命名:参数的名字必须和变量的命名规范一致。
2. 方法的参数:使用有意义的参数命名,如果可能的话,使用和要赋值的字段一样的名字。
热心网友 时间:2022-05-12 15:22
是JAVA软件吗?
热心网友 时间:2022-05-12 16:57
小写单词组成