CSSWeb前端开发规范 2018

web前端开发有笔试吗?|前端开发所要的职业要求|网易 前端开发薪资

一:通过w3c 标准
二:css样式一律小写
三:使用Reset但并非全局Reset(Reset并不是一成不变的,具体还需要根据项目的不同 需求做适当的修改)
四:良好的命名习惯
1:面向对象命名(navgation,blaner,footer…..)
2:面向功能性命名(float_right,floatleft….)
3:“
”链接命名:
4:私有样式命名规范:”前缀_位置缩写/功能/”
如:该模块是属于产品就可以用product为前缀,
上中下就可以依次是。product_t,product_m,product_b,
中间又分为左右结构,那就是product_m_l,product_m_r。
五:代码缩写 font:normal small-caps bold 110%/1.3 serif;
六:利用css继承(如已经继承上级样式则不再重写,故衡量全局共同样式,写出全局公共样式)
七:使用多重选择器
八:适当的代码注释
九:给你的CSS代码排序,按字母排序
建议遵循:布局定位属性–>自身属性–>文本属性–>其他属性
此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
属性列举:
布局定位属性主要包括:margin&padding&float(包括clear)&position(相应的 top,right,bottom,left)&display&visibility&overflow等;
自身属性主要包括:width & height & background & border;
文本属性主要包括:font&color&text-align&text-decoration&text-indent等;
其他属性包括:list-style(列表样式)&vertical-vlign&cursor&z-index(层叠顺序) &zoom等
十:保持CSS的可读性
1:属性多的分行写,属性少于3个可以写一行
2:分个样式间用空格隔开
3:多重选择器间用class隔开
.nav, .nav_left, .content_right{
float:left;
margin:10px 5px;
padding:5px 0 10px 5px;/布局/

background-color:#3399cc
border:1px solid #FFF;/自身/

color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;/文本/

z-index:10;/其它/
}
.nav, .nav_left, .content_right{background-color:#3399cc; color:#666; height:300px;}
十一:选择更优的样式属性值 border:0变为border:none
十二:使用<link>代替@import
十三:使用外部样式表
十四:避免使用CSS表达式(Expression)
十五:代码压缩
十六:值为0的不加单位H1{margin:0px; padding:0px;} = H1{margin:0;padding:0;}
十七:颜色值简写:#333333——-#333;
十八:主要文件命名与html项目名称对应(如:yunzhi.css)—–全小写,英文“-”分开(与html文件名一样方式);
十九:
二十:样式以class为主,不用id
二十一:重置样式reset:
/ 清除内外边距 /
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, / structural elements 结构元素 /
dl, dt, dd, ul, ol, li, / list elements 列表元素 /
pre, / text formatting elements 文本格式元素 /
form, fieldset, legend, button, input, textarea, / form elements 表单元素 /
th, td, / table elements 表格元素 /
img/ img elements 图片元素 /{
border:medium none;
margin:0;
padding:0;
}
/ 设置默认字体 /
body,button, input, select, textarea {
font:12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size:100%; }
em{font-style:normal;}
/ 重置列表元素 /
ul, ol { list-style:none; }
/ 重置超链接元素 /
a { text-decoration:none; color:#333;}
a:hover { text-decoration:underline; color:#F40; }
/ 重置图片元素 /
img{ border:0px;}
/ 重置表格元素 /
table { border-collapse:collapse; border-spacing:0;
二十二:常用命名
(1)页面结构类容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
(2)导航类
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
位置导航: crumb
菜单:menu
子菜单:submenu
面包屑:breadcrumb(即页面所处位置导航提示)
(3)网页内容类
标题: title
摘要: summary
箭头: arrow
商标: label
网站标志: logo
转角/圆角: corner
横幅广告: banner
栏目: column
子菜单: subMenu
搜索: search
搜索框: searchBox
登录: login
工具条: toolbar
下拉: drop
标签页: tab
当前的: current
列表: list
滚动: scroll
服务: service
提示信息: msg
新闻: news
小技巧: tips
下载: download
栏目标题: title
热点: hot
加入: joinus
注册: regsiter
指南: guide
友情链接: friendlink
状态: status
版权: copyright
按钮: btn
合作伙伴: partner
投票: vote
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service

软件开发前端知识视频|web前端开发基本要求|web前端开发素质要求的标准

» 本文来自:前端开发者 » 《CSSWeb前端开发规范 2018》
» 本文链接地址:https://www.rokub.com/4409.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!