css命名与写法

原创 小棋子 随笔 css 253阅读 2018-01-03 11:38:14 举报

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有些属性是可以缩写的,比如padding,margin,font,color等等。去掉小数点前的“0”;

如:padding-left:10px;padding-right:10px;color:#112233;font-size:0.8rem;

写成padding:0 10px;color:#123;font-size:.8rem

CSS连字符选择器命名规范  

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

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

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

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

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

3.不要随意使用Id,id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如添加了“.is-”前缀。

CSS常用的命名规则  

头:header  

内容:content/container  

尾:footer  

导航:nav 

主导航:mainnav

子导航:subnav 

顶导航:topnav  

低导航:bottomnav

边导航:sidenav  

左导航:leftnav  

右导航:rightnav

侧栏:sidebar  

栏目:column  

页面外围控制整体佈局宽度:wrapper  

左右中:left right center  

登录条:loginbar  

标志:logo  

广告:banner  

页面主体:main  

热点:hot  

新闻:news  

下载:download    

菜单:menu  

子菜单:submenu  

搜索:search  

友情链接:friendlink  

版权:copyright  

滚动:scroll  

内容:content  

标签:tags  

文章列表:list  

提示信息:msg  

小技巧:tips  

栏目标题:title  

加入:joinus  

指南:guide  

服务:service  

注册:regsiter  

状态:status  

投票:vote  

合作伙伴:partner

注释的写法:  / Header /    

摘要: summary 

标志: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.尽量不缩写让类名更有可读性。

5.项目如果用DOM绑定的;加前缀jq-xxx或者js-xxx(加这两个前缀的不参与css样式,目的是为了css跟js的降低耦合度便于维护)

CSS样式表文件命名(模仿bootstrap.css书写方式可以自己整理一套属于自己的bootwq.css)

正常化(重置样式):normalize.css 

主要的 main.css  

CSS层级类名命名法

<body>

<header>

    <div class="container">

        <div class="navbar-header">顶部区域</div>

        <nav><ul>...</ul></nav>

        <nav>

            <div class="container">

                <div class="row">

                    <div class="col-sm-12">...</div>

                </div>

            </div>

        </nav>

    </div>

</header>

<section>中间</section>

<div class="container">中间</div>

<!-- <main> 标签规定文档的主要内容。IE不支持该标签

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

 -->

<main>

    <section>定义文档中的区段</section>

    <article>左边</article>

    <aside>右边</aside>

</main>

<footer>

    <div class="container">

        <ul class="navbar-footer">底边</ul>

    </div>

</footer>

<!-- Large modal /.fade为动画效果 --><!-- 详细看官网http://v3.bootcss.com/javascript/#modals -->

<button type="button" class="btn btn-primary" 

    data-toggle="modal" data-target=".bs-example-modal-lg">大 modal</button>

<div class="modal fade bs-example-modal-lg">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

        ...

        </div>

    </div>

</div>

<!-- Small modal -->

<button type="button" class="btn btn-primary" 

    data-toggle="modal" data-target=".bs-example-modal-sm">小 modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">

  <div class="modal-dialog modal-sm" role="document">

    <div class="modal-content">

      ...

    </div>

  </div>

</div>

</body>

html5新标签:http://wq57diancn.blog.163.com/blog/static/26431203220168288549963/

        http://wq57diancn.blog.163.com/blog/static/264312032201699111043730/
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复