码迷,mamicode.com
首页 > Web开发 > 详细

关于css起名

时间:2016-10-31 22:02:28      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:display   friend   顺序   css选择器   语义   wrapper   head   搜索   jpg   

作者:词晖
链接:https://www.zhihu.com/question/19586885/answer/48933504
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

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

关于css起名

标签:display   friend   顺序   css选择器   语义   wrapper   head   搜索   jpg   

原文地址:http://www.cnblogs.com/poilk/p/6017011.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!