CSS撰写标准、次序和取名标准

日期:2021-03-08 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

这些是参照了海外1些文章内容和我的本人工作经验总结出来,我想对写CSS的前端开发客户来讲是值得学习培训的。

1、CSS撰写次序

1.部位特性(position, top, right, z-index, display, float等)
2.尺寸(width, height, padding, margin)
3.文本系列(font, line-height, letter-spacing, color- text-align等)
4.情况(background, border等)
5.别的(animation, transition等)

2、CSS撰写标准
1.应用CSS缩写特性
CSS一些特性是能够缩写的,例如padding,margin,font这些,这样精简编码另外又能提升客户的阅读文章体验。

2.去掉小数点前的“0”

3.简写取名

许多客户都喜爱简写类名,但前提条件是要令人看懂你的取名才可以简写哦!

4.16进制色调编码缩写

一些色调编码是能够缩写的,大家就尽可能缩写吧,提升客户体验为主。

5连标识符CSS挑选器取名标准

1).长名字或词组可使用中横线来为挑选器取名。

2).不提议应用“_”下划线来取名CSS挑选器,为何呢?

键入的情况下少按1个shift键; 访问器适配难题 (例如应用_tips的挑选器取名,在IE6是失效的) 能优良区别JavaScript自变量取名(JS自变量取名是用“_”)

6.不必随便应用id

id在JS是唯1的,不可以数次应用,而应用class类挑选器却能够反复应用,此外id的优先选择级优先选择与class,因此id应当按需应用,而不可以乱用。

7.为挑选器加上情况前缀

有时能够给挑选器加上1个表明情况的前缀,让词义更明了,例如下图是加上了“.is-”前缀。

3、CSS取名标准(标准)
常见的CSS取名标准

头: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
标识:tags
文章内容目录:list
提醒信息内容:msg
小窍门:tips
栏总体目标题:title
添加:joinus
指南:guide
服务:service
申请注册:regsiter
情况:status
网络投票:vote
协作小伙伴:partner

注解的写法:

/* Header */
內容区
/* End Header */

id的取名:

1)网页页面构造

器皿: container
页头:header
內容:content/container
网页页面行为主体:main
页尾:footer
导航栏:nav
侧栏:sidebar
栏目:column
网页页面外围操纵总体佈局宽度:wrapper
上下中:left right center

(2)导航栏

导航栏:nav
主导航栏:mainnav
子导航栏:subnav
顶导航栏:topnav
边导航栏:sidebar
左导航栏:leftsidebar
右导航栏:rightsidebar
菜单:menu
子菜单:submenu
题目: title
引言: summary

(3)作用

标示:logo
广告宣传:banner
登录:login
登陆条:loginbar
申请注册:register
检索:search
作用区:shop
题目:title
添加:joinus
情况:status
按钮:btn
翻转:scroll
标籤页:tab
文章内容目录:list
提醒信息内容:msg
当今的: current
小窍门:tips
标志: icon
注解:note
指南:guild
服务:service
网络热点:hot
新闻:news
免费下载:download
网络投票:vote
协作小伙伴:partner
友谊连接:link
版权:copyright

4、留意事项::

1.1律小写;
2.尽可能用英文;
3.不加中槓和下划线;
4.尽可能不缩写,除非1看就搞清楚的单词。

5、CSS款式表文档取名

关键的 master.css
控制模块 module.css
基础同用 base.css
合理布局、版面 layout.css
主题 themes.css
专栏 columns.css
文本 font.css
表单 forms.css
补钉 mend.css
复印 print.css

上一篇:恒路通交通出行工程项目 返回下一篇:没有了