当前位置: 首页 > Web前端 > CSS

css命名分类排序方法

时间:2023-03-31 11:25:33 CSS

CSS内部分类及其顺序1、重置(reset)和默认(base)(标签):消除默认样式和浏览器差异,设置部分标签的初始样式,减少后面的重复工作的!大家可以根据自己网站的需要来设置!统一处理:建议在该位置统一调用背景图(这里指的是多个布局或模块或组件共享的图片)和清除浮动(这里指清除通用性高的布局、模块、组件).风格!2.Layout(grid)(.g-):把页面分成几个大块,通常有header、body、maincolumn、sidecolumn、tail等!3.模块(.m-):通常是语义上可重用的更大的整体!比如导航、登录、注册、各种列表、评论、搜索等等!4.Component(unit)(.u-):通常是一个比较小的个体,无法进一步划分,通常在各个模块中复用!比如按钮、输入框、加载、图标等!5.Function(.f-):为了方便一些常用的样式的使用,我们将这些使用频率高的样式剥离出来,按需使用。通常,这些选择器都有固定的样式表达式,比如清除浮动等!不能被虐待!6、皮肤(.s-):如果需要提取皮肤类型的样式,一般是文字颜色、背景颜色(图片)、边框颜色等,非换肤网站通常只提取文字颜色!非皮肤网站不应该滥用这个类!7.Status(.z-):为status类样式添加前缀,统一标识,方便识别。它只能组合使用或作为后代使用。8.外观(.u-ipt.z-dis{},.m-listli.z-sel{}),详见命名规则扩展相关项。功能风格和皮肤风格是表现风格,请勿滥用!上述顺序可根据需要适当调整。统一语义理解和命名布局(.g-)语义命名缩写文档docdocheadheadhdbodybodybdtailfootftmaincolumnmainmnmaincolumnsub-containermaincmncsidecolumnsidesdsidecolumnsub-containersidecsdcboxcontainerwrap/boxwrap/boxmodule(.m-),component(.u-)语义命名缩写navigationnavnavsub-navigationsubnavsnavbreadcrumbcrmmenumenutabtabtabtitleareahead/titlehd/ttcontentareabody/contentbd/ctlistlistlstformtabletbformformfmhotspothothotrankingtoptoptoploginloginloglogologoadvertisementadvertisementadsearchsearchschslidesldtiptipstipshelphelphelpnewsnewsnewsdownloaddldregistrationregistregvotevote投票投票copyrightcopyrightcprtresultrsttitletitlettbuttonbuttonbtninputiptfunction(.f-)语义命名速记floatclearclearbothcbfloatleftfloaleftflfloatrightfloatrightfrinlineblocklevelinlineblockibtextcentertextaligncentertac文本右对齐tartextalignlefttalverticalalignmiddlevamoverflowhiddenoverflowhiddenoh完全消失displaynonednfontsizefontsizefsfontweightfontweightfwskin(.s-)语义命名简写fontcolorfontcolorfcbackgroundbackgroundbgbackgroundcolorbackgroundcolorbgcbackgroundimagebackgroundimagebgibackgroundpositioningbackgroundpositionbgpbordercolorbordercolorbdcstate(.z-)showsemanticnamingshorthandfontcolorfontcolorfcbackgroundbackgroundbgbackgroundcolorbackgroundcolorbgcbackgroundimagebackgroundimagebgibackgroundpositioningbackgroundpositionbgpbordercolorbordercolorbdcstate(.z-)showsemanticnamingshorthandfontcolorfontcolorcurrenterrunavailabledisableddis原地址http://nec.netease。com/standa...