我的css样式写法总结
作者:Ghost 来源:css森林 发布时间:2009-01-18 13:04:00
CSS入门很简单,规则不多,写法也比较灵活,因此也带来了很多有创意的写法。跟IE一样,很好的容错性,像《 边框样式写法总结 》所说的border的写法。不过在带来方便的同时,也让开发者丢掉了程序员应有的“严谨”。可能觉得这跟样式的关系不大,没有像脚本那么严重,这是认识上的问题,抛开样式跟脚本所作用的对象不同,样式的写法在一定程度上就是一种编程,只不过少了那些被认为是程序特点的条件判断、定义变量等等。
我一直不太赞同规范死样式的写法,我的观点是使用自己熟悉的方式效率是最高的,简单的说就是让合作者尽可能的以自己熟悉的方式写代码,这种模式是我一直在探索的,不过在实际项目中,实现起来有一定的难度,因为存在合作和维护的问题。说回样式写法的问题,这里只是因为前段时间组里在讨论,所以借此机会把自己的一些写法总结一下。
/*=S 例子 */.class-a2,.class-a4,.class-b1,.class-b2,.class-c1,class-c3{width:100px;height:100px;margin-left:2em;padding:10px;}.class-e1,.class-e2,.class-e3,.class-e4{width:60px;height:60px;}/*=E 例子 */
主要有以下几点:
选择符以《 样式命名规则 》中的方式命名。
选择符以类型分,同类放一起,类的定义顺序以HTML中实际的顺序为参考,以方便查找为主。
删除不必要的空白(空格或tab)。
属性以《 样式书写顺序 》中的顺序书写,一个属性定义为一行,最后一个定义保留分号。
注释以《 注释书写规范 》中的规范书写。
简单解释下:
命名的重要相信大家都清楚了,好的名称应该是可以“自解释”的。
我习惯用文本编辑器写样式,分类可以方便查找和分享。
有些留白并不是必须,像属性前面的空白、分号后的空白等等,如“ width : 100px; ”,一个定义多了4~5个字节,最主要的是很多时候我们并不一定会使用压缩工具。
以一定的顺序写有利于查找,当然你可以用首字母排序,只是我考虑了那几乎可被忽略的性能问题。一个属性定义为一行,也是为了方便查找、使用工具对比。虽然最后一个定义的分号可以去掉,不过很容易在维护时导致很多不必要的麻烦。
统一的注释可以减少误会、节省沟通成本,也可以方便查找。
希望对还没形成自己样式书写风格的同学有所帮助,如果有更好的想法,欢迎一起讨论。
猜你喜欢
- 废话不多说了,直接给大家贴代码了。import urllibimport urllib2import cookielibdef getImg
- 打包成exe文件可以让python代码在没有python环境的条件下,依然能够运行,实在是码农们写追女朋友表白、情人节浪漫的必需品!1、使用
- character_set_client ,这是用户告诉MySQL查询是用的什么字符集。 character_set_connection
- 用到的一些知识点:Flask-SQLAlchemy、Flask-Login、Flask-WTF、PyMySQL这里通过一个完整的登录实例来介
- Tensorboard:如何更直观的观察数据在神经网络中的变化,或是已经构建的神经网络的结构。上一篇文章说到,可以使用matplotlib第
- 阅读上一章:[翻译]标记语言和样式手册 Chapter 15 为body指定样式Chapter 16 下一步现在你知道了如何使用标准改进你的
- ewebeditor支持兼容IE8 的方法方法:前几天ie8正式公布了,当天中午我就去下载了一个迫不急待的将自己的浏览器升级到ie8,偶还刻
- Howdy, 大家好,又是我~ 上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题,深入讲讲上次提到
- 本文介绍了mpvue+vuex搭建小程序详细教程(完整步骤),分享给大家,具体如下:源码mpvue-vuex-demo构成1、采用mpvue
- 前言开发过程中有时需要使用路径数据,虽然python有自己的svg或其他矢量库,但这里只是出于实验的目的,没必要深入研究,所以采用一些简单的
- 本文实例讲述了python使用 __init__初始化操作。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#
- 本文实例讲述了JavaScript函数参数使用带参数名的方式赋值传入的方法。分享给大家供大家参考。具体分析如下:这里其实就是在给函数传递参数
- 用于模式匹配的String方法:String支持4种使用正则表达式的方法:seach()用于检索,参数是一个正则表达式,返回第一个与之匹配的
- 项目地址:https://github.com/GriffinLewis2001/Python_movie_links_scraper运行效
- 回想自己从事Web方面的开发已经有6-7年,对于各种Web技术都已经非常熟悉.可是,身为程序员的我对于制作Web表单界面的事着实心痛。心痛1
- react-native安装流程1.npx react-native init AwesomeProject报错运行 cd ./demo/i
- 错误信息:ERROR 2002 (HY000): Can't connect to local MySQL server throu
- 前言最近在学习过程中需要用到pytorch框架,简单学习了一下,写了一个简单的案例,记录一下pytorch中搭建一个识别网络基础的东西。对应
- 最近由于单位数据库硬盘空间不足,整理的时候查了许多文章,也进行了测试,整理后得出一些经验供大家参考。首先,在网上看到一篇文章,如何Shrin
- 本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果。分享给大家供大家参考,具体如下:基于Sketch.js,实现了物