优雅的css写法

一、利用好代码折叠

  css也可以进行优雅的代码折叠而且会比html更好看

  折叠后的效果:

  

  

  这样就可以很舒服的把它折叠起来。

二、向Twitter Bootstrap学习
  1. 学习的第一点就是用class,去减少id。当然这是一个很基本的知识。

  2. 学习的第二点是命名的词汇。

    如group、control、banner、list、item,title、panel、content、container这些表结构和关系的词汇;

    还有一些形容词danger、primary、lg、xs、info等等;

    html以及所有的语言都在推行语义化,标签也一样。多去用贴近生活的方式去语义话的写代码。

三、前端的流行词汇。

  component 和 module 组件和模块是前端不错的class命名词汇。

四、来自于各大规范的css写法。

  一个不错的规范,把css的属性按照重要程度去排序。

  当然这个重要程度无法估量,但是基本都是从结构>修饰>伪类,如display,float,position的重要程度就会比较高一些,然后是margin,padding,left,top之类的,然后是颜色,背景,边框等等。这个标准人为制定。是主观的东西。

  

  

  

  

  网易的规范和常用的命名词汇。

  

时间: 2024-11-17 21:00:56

优雅的css写法的相关文章

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

【知识点】如何写出优雅的CSS代码 ?

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop) div p :matches(em, b, strong) {} 使

针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_; (4)\9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例: (1)区别FF(IE8)与IE6 IE7 back

如何写出优雅的css代码?

如何写出优雅的css代码? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来井井有条,清晰易懂,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如

(转载)不错的CSS写法

根据微信订阅号"设计达人"推送的文章,学到了如题知识.个人尝试了一下,感觉还不错.原文链接:http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ. 字体 从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),Win7的时候,字体默认的宋体,而从Windows 10开始,浏览器默认字体改成微软雅黑了,而 Mac OS 默认也是黑体而非宋体. 推荐字体: Windows:MicroSoft YaHei(微软雅黑) Ma

清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用. 1.在容器div的里面结束标记之前写如下这样的div这段代码: <div style="clear:both"></div> 虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标签,违背了结构和表现分离的web标准的精髓,如果页面空标签多

[k]优雅的css

1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) 1 <ul> 2 <li class="step1">下载XXX应用</li> 3 <li class="step2">60秒在线申请</li> 4 <li class="step3">线下签约</li> 5 </ul> css:

优雅的类写法

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的. 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类. 一.例子 例子为一个轻提示组件Toast. 需要实现的功能: on方法,显示提示 off方法,隐藏提示 init方法,初始化提示语 function Toast(option){ this.prompt = ''; this.elem = null; this.init(option); } Toast.prototype = {