在写css样式的时候总是不经意的乱七八糟。无论是命名还是样式的书写顺序,这里总结一下,提醒自己在写css时要时刻注意。你可以参考一下。1.样式属性的顺序在单一样式规则下编写属性时,应按功能分组,组与组之间必须有一个空行。同时,应该按照定位模型>盒模型>排版>视觉的顺序编写,以提高代码的可读性。PositioningModel布局,位置,相关属性包括:position,top,z-index,display,float等BoxModelBox模型,相关属性包括:width,height,padding,margin,border,overflowTypographic文本布局,相关属性包括:font、line-height、text-alignVisual视觉外观,相关属性包括:color、background、list-style、transform、animation2。CSS选择器命名规则分类命名法(在前端组件化中尤为重要)布局(网格)(.g-):把页面分成几个大块,通常有header、body、主栏、侧栏、页脚等!模块(module)(.m-):通常是语义上可重用的更大的整体!如导航、登录、注册等组件(单元)(.u-):通常是一个比较小的个体,无法进一步划分,通常在各个模块中复用!比如按钮,输入框,loading等等!Function(.f-):为了方便一些常用的样式的使用,我们把这些使用率高的样式剥离出来,按需使用。通常,这些选择器都有固定的样式表达式,比如清除浮动等!不能被虐待!Status(.z-):为status类样式添加前缀,统一标识,便于识别,她只能组合使用或者作为后代出现(.u-ipt.z-dis{},.m-listli.z-sel{})javascript(.j-):.j-专门用于JS获取节点,不要使用.j-定义样式不要使用“_”下划线命名css即可打字时区分javascript变量名Ashift键浏览器兼容性问题(比如使用_tips选择器命名,在IE6中无效)id使用驼峰命名(不要乱用id)变量、函数、mixins、占位符在scss使用驼峰式命名,语义一致不同类型的命名方式:只需加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但它们是完全不同的模块。其他示例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2、ETC。命名方式(BEM):class-body(例如:g-head),class-body-modifier(例如:u-btn-active)后代选择器:body-modifier(例如:.m-page.cut{})注意:不要在页面布局中使用后代选择器,因为污染的可能性更大;3.最好的写法/*Thisisacertainmodule*/.m-nav{}/*Modulecontainer*/.m-navli,.m-nava{}/*共性优化组合优先*/。m-navli{}/*Personalizedsemanticlabelselectorafter*/.m-nava{}/*Personalityaftercommonityinstructuralorder*/.m-nava.a1{}/*personalityinpost-personality*/.m-nava.a2{}/*后个性中的个性*/.m-nav.z-crta{}/*交互状态变化*/.m-nav.z-crta.a1{}.m-nav.z-crta.a2{}.m-nav.btn{}/*典型的后代选择器*/.m-nav.btn-1{}/*典型的后代选择器扩展*/.m-nav.btn-dis{}/*典型的后代选择器扩展(状态)*/.m-nav.btn.z-dis{}/*功能同上,请两者选其一(不兼容IE6时使用)*/.m-nav.m-sch{}/*控制其他位置内部模块*/.m-nav.u-sel{}/*控制其他内部组件的位置*/.m-nav-1{}/*模块扩展*/.m-nav-1li{}.m-nav-dis{}/*Moduleextension(Status)*/.m-nav.z-dis{}/*功能同上,请二选一(如果不兼容IE6)*/4。统一语义理解和命名布局(.g-)语义命名简写文档docdocheadheadhdbodybdtailfootftmaincolumnmainmnmaincolumnsubcontainermaincmncsidebarsidesdsidebarsubcontainersidecsdcboxcontainerwrap/boxwrap/boxmodule(.m-),component(.u-)语义命名速记navigationnavnavsubnavsubnavsnavbreadcrumbscrumbcrmmenumenumenutabtabtabtitleareahead/titlehd/ttcontentareabody/contentbd/ctlistlistlsttabletabletbformformfmhothothothottoptoploginloglogologoadvertiseadsearchsearchschslideslidesldtipstipshelphelpnewsnewsdownloaddownloaddldregistregvotevotecopyrightcprtresultrsttitletitletbuttonbuttonbtninputinputiptfunction(.f-)semanticnamingshorthandclearfloatclearbothcbleftfloatfloatleftflinlineinlineblockibtextcentertextaligncentertacverticalalignmiddlevamoverflowhiddenoverflowhiddenohdisappearcompletelydisplaynonednfontsizefontsizefzfontweightfontweightfsskin(.s-)semanticnamingshorthandfontcolorfontcolorfcbackgroundcolorbackgroundcolorbgcbordercolorbordercolorbdcStatus(.z-)语义命名缩写Selectselectedselcurrentcurrentcrtdisplayshowshowhidehideopenopenopenclosevcloseerrorerrorunavailabledisableddis5.注释全部小写,破折号尽量不要使用缩写不要用id去掉小数点前的0:0.9rem=>.9rem使用缩写:margin:01rem3rem本文大部分内容参考来自网易前端规范:http://nec.netease.com/standa...
