摘要:属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称,使用有组织的或目的明确的名称名称应当尽可能短,并且意义明确,避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。
html属性顺序
class id data-*,name src, for, type, href title, alt aria-*, role
/*a标签*/ Example link /*input标签*/ /*img标签 img必须加上alt*/ htmlcss命名 class命名规范:
class 名称中只能出现小写字符和破折号"-";
class 使用有意义的名称,使用有组织的或目的明确的名称;
class 名称应当尽可能短,并且意义明确,避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思;
BEM命名方法:/* 块--代表更高级别的抽象或组件 */ .block /* 元素--代表.block的后代 */ .block_element /* 修饰符--代表.block的不同状态或不同版本 */ .block--modifier /* 例如 */ .media{} .media_img{} .media_img--rev{} .media_body{}
常用命名:/*.media是一个块,.media_img--rev是一个加了修饰符的.media_img的变体,它是属于.media的元素。而.media_body是一个尚未被改变过的也是属于.media的元素。*/ htmlWelcome to Foo Corp
Foo Corp is the best, seriously!
/* --base 基本-- */ .header /* --头部-- */ .logo /* --logo-- */ .footer /* --底部-- */ .nav /* --导航-- */ .top-nav /* --顶部导航链接-- */ .main /* --主体内容-- */ .container /* --内容居中-- */ --current /* --默认状态-- */ -title /* --标题-- */ -item /* --列表-- */ -con /* --内容-- */ icon- /* --图标- */ /* --侧边栏-- */ .aside .aside-nav /* --侧边栏导航-- */ .aside-nav_item /* --侧边栏分类-- */ .aside-nav--current /* --侧边栏当前状态-- */ /* --盒子-- */ .box .box-title /* --盒子标题-- */ .box-title_txt /* --盒子标题文字-- */ .box-con /* --盒子内容-- */css编码规范
.selector{ /*显示相关*/ display float clear cursor content /*定位等*/ position top left z-index /*盒模型*/ margin padding width height border border-radius /*排版文字等*/ color font vertical-align line-height white-space text-decoration text-align /*背景*/ background opacity } 如: .selector { display: block; float: right; position: absolute; top: 0; right: 0; z-index: 100; width: 100px; height: 100px; border: 1px solid #e5e5e5; border-radius: 3px; font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; background-color: #f5f5f5; } cssless规范
/* less嵌套不超过三层 */ .aside-nav{ margin-bottom: 10px; margin-top: 0; dt { cursor: pointer; background: #fff; a { text-decoration: none; color: @cDark; } } dd { display: none; height: 30px; padding-left: 20px; line-height: 30px; } } lessless文件命规范
index.less /* --首页样式-- */ header.less /* --头部样式-- */ footer.less /* --底部样式-- */ bass.less /* --基本样式-- */ box.less /* --盒子样式-- */ table.less /* --表格样式-- */ buttom.less /* --按钮样式-- */ icon.less /* --图标样式-- */ iconfont.less /* --图标字体样式-- */ variable.less /* --less变量样式-- */ forms.less /* --表单样式-- */ aside.less /* --侧边样式-- */ normalize.less /* --重置样式-- */ paginator.less /* --分页样式-- */ login.less /* --登录样式-- */ reg.less /* --注册样式-- */ ul***.less /* --以ui开头是插件样式-- */特别注意
html和css/less都用两个空格代替制表符(tab)进行缩进
以组件为单位组织代码段
制定一致的注释规范
使用一致的空白符将代码分隔成块
为选择器分组时,将多带带的选择器多带带放在一行
声明块的右花括号应当多带带成行
每条声明都应该独占一行,所有声明语句都应当以分号结尾
尽量使用简写形式的十六进制,十六进制值应该全部小写,例如,#fff
避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;
/* selector */ .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; box-shadow: 0px 1px 2px #ccc; background-color: rgba(0,0,0,.5); } /* Single declarations on one line */ .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } /* Multiple declarations, one per line */ .sprite { display: inline-block; width: 16px; height: 15px; background-image: url(../img/sprite.png); } css
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49882.html
摘要:属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称,使用有组织的或目的明确的名称名称应当尽可能短,并且意义明确,避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...
摘要:可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型 可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...
摘要:可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型 可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...
阅读 1563·2021-11-22 15:33
阅读 1691·2021-11-15 18:01
阅读 594·2021-10-09 09:43
阅读 2579·2021-09-22 16:03
阅读 729·2021-09-03 10:28
阅读 3532·2021-08-11 10:22
阅读 2693·2019-08-30 15:54
阅读 1742·2019-08-30 14:21