css命名规则

 我来答
欢喜婆婆给我5
2020-11-10 · TA获得超过1617个赞
知道小有建树答主
回答量:1368
采纳率:39%
帮助的人:44.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等)

CSS书写规范使用CSS缩写属性

  CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

  去掉小数点前的“0”

  简写命名

  很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

  16进制颜色代码缩写

  有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

  连字符CSS选择器命名规范

  1.长名称或词组可以使用中横线来为选择器命名。

  2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  输入的时候少按一个shift键;

  浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  能良好区分JavaScript变量命名(JS变量命名是用“_”)

  不要随意使用Id

  id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。 

  为选择器添加状态前缀

  有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

  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

注意事项::

  1.一律小写;

  2.尽量用英文;

  3.不加中槓和下划线;

  4.尽量不缩写,除非一看就明白的单词。

CSS样式表文件命名

  主要的 master.css

  模块 module.css

  基本共用 base.css

  布局、版面 layout.css

  主题 themes.css

  专栏 columns.css

  文字 font.css

  表单 forms.css

  补丁 mend.css

  打印 print.css
翼飞ong
高粉答主

2020-11-10 · 关注我不会让你失望
知道大有可为答主
回答量:7.8万
采纳率:78%
帮助的人:1502万
展开全部
头: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
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
Shi于初夏

2020-11-10 · 每个人都是每个人的过客
Shi于初夏
采纳数:4171 获赞数:3881

向TA提问 私信TA
展开全部
CSS的命名规则的话,这跟自己想怎么命名就怎么命名,只要自己能看懂就行。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
教育心理师

2020-11-10 · TA获得超过1832个赞
知道大有可为答主
回答量:2.4万
采纳率:0%
帮助的人:1017万
展开全部
这个实际上就是根据一个规律性进行一个命名的,它的命名规则还是比较好的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
xiwangnengxia

2020-11-10 · TA获得超过5.7万个赞
知道顶级答主
回答量:8.3万
采纳率:47%
帮助的人:5743万
展开全部
使用css的时候,只要是没有数字开头的这样的命名都是可以的,并没有什么太多的规则。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(36)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式