CSS书写规范、顺序

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”

简写命名

连字符CSS选择器命名规范

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

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

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

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

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

不要随意使用Id

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



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


博客借鉴

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容