首页 > 教程 > 关键词 > 样式表最新资讯 > 正文

让样式表CSS代码更加专业规范

2009-03-02 17:07 · 稿源:网页教学网

每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?虽然webjx.com介绍了多种这方面的技巧,得开始用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好!

一、重置

首先,很认真的告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset,或者你自己编写的重置代码,只要使用就对了。

它能很简单的移除所有元素的填充(padding)和边距(margin):

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用(重置样式表),而你不要只是使用他的重置样式表,将它拖放到你的项目中。调整它(的重置样式表),建立属于自己的重置样式表。

噢,请停止使用:

* { margin: 0; padding: 0; }

花更多的时间去制作它,当你移除了填充(padding)你认为单选按钮会发生什么变化?表单元素有时能够做些时髦的事情,所以最有效的方式就是将他们独立。

二、排序

一个小的测试:这个例子就是要让你思考如何更快的找到右边距属性?

Example#1

div#header h1 {

z-index: 101;

color: #000;

position: relative;

line-height: 24px;

margin-right: 48px;

border-bottom: 1px solid #dedede;

font-size: 18px;

}

Example#2

div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}

你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS,将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码,其他人又用另一种方法去组织,但是在我的公司,我们协商一致做出决定,所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

三、组织

你应该组织你的样式表以致相关的内容靠在一起,更简单的找到想要的。使用更有效的注解。举个例子,这是我如何构造我的层叠样式表:

/*****Reset*****/移除元素的填充(padding)和边距(margin)。

/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.

/*****Generic Classes*****/定义简单的风格,好像浮动的某一侧, 移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。

/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素

/*****Header*****/定义所有Hearder元素

/*****Content*****/定义所有内容框内的元素

/*****Footer*****/定义所有Footer的元素

/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。

四、一致性

无论你决定使用什么方式去编写代码,保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致。

就我个人而言,我将使用两者结合的方式。如果一个选择器超过了3个属性,我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }

div#header div.column {

border-right: 1px solid #ccc;

float: rightright;

margin-right: 50px;

padding: 10px;

width: 300px;

}

div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜欢的工作方式然后保持一致。

五、从正确的地方开始

在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。

通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译)。

利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

总结

这些能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束,接下来我将会去带来一些其他的与大家分享,欢迎您关注webjx.com。

  • 相关推荐
  • 大家在看
  • 华为开源数据库能力 开放openGauss数据库源代码

    今日,华为正式宣布开源数据库能力,开放openGauss数据库源代码,并成立openGauss开源社区,社区官网(opengauss.org)同步上线。

  • 首个直播带货规范7月施行,重点规范刷单、虚假宣传等情况

    2020年直播带货行业可以说是十分火爆,除了一部分是今年疫情原因之外,近两年的增长趋势也十分明显。对行业的规范也被提升日常,就在7月1日,中国广告协会制定的《网络直播营销活动行为规范》将正式实施,该规范将重点规范直播带货行业刷单、虚假宣传等情况。

  • 喜茶道歉:门店操作不规范造成,将进行整改

    近日,南京抽检 16 批次果茶、 6 批次食用冰,其中就包含了市场上比较热门的茶饮品牌喜茶、奈雪、一点点等。结果显示:喜茶的一款食用冰菌落总数超标; 4 款果茶/奶茶中菌落总数高于同类标准, 3 款被检出大肠菌群,存在微生物污染。市场监管部门已约谈相关负责人。

  • MySQL的user表被删除了怎么办 user表被清空解决办法

    ​近期就有人遇到user表内容被清空的情况。如果发生了此情况,千万不要慌,更不能隐瞒问题(今天这位朋友就比较惨,别人删了也没敢告知,结果binlog已经清理了),这样有利于恢复。现在针对几种情况,进行恢复操作的演示。

  • 比PS4快100倍 Epic:PS5 SSD性能太强 已重写虚幻5部分代码

    据外媒报道,Epic Games工程副总裁Nick Penwarden近日接受采访时表示,PS5在计算和图形性能上都实现了巨大飞跃,其存储架构也很特别,必须重写虚幻5引擎的部分代码,才能充分发挥PS5 SSD的读写速

  • MySQL统计库表大小都是多少

    统计每个库每个表的大小是数据治理的其中最简单的一个要求,本文将从抽样统计结果及精确统计结果两方面来统计MySQL的每个库每个表的数据量情况。

  • 天王表质量卓越 值得信赖!

    天王表作为国内四大名表之一,发展非常迅速,深受消费者喜爱。运作、商业逻辑等等,固然能够帮天王表快速发展,但真正在背后支撑天王表走过这三十年的,是天王表质量的卓越。天王表质量卓越 值得信赖一枚出众的腕表,是表盘、表带甚至指针等细节交融统一的结晶,也是技术工艺与设计理念的完美结合。将不同的风格与文化元素,融入腕表的细节里,最终才能成就一枚时尚璀璨又内涵隽永的腕表。而要做到这一点,需要天王表工作人员对工?

  • 一文读懂offer发放注意事项,规范管理杜绝风险

    前几天看见一个HR吐槽,说是好不容易招了个人,领导见了,offer也发了,本以为万事大吉,刚准备喝杯茶,缓口气。结果!过了两天,那个部门领导说,现在有一个更适合的,不想要那个人了!而且!候选人也每天在催,想早点入职!要知道,有多少的HR是栽在“发offer”这个坑里的!一不留神就里外不是人,在内受委屈,在外又背锅,满腹心酸事,两眼泪涟涟。那么,发放offer,HR怎样才能机智避坑,做到无风险发放呢?我们首先了解下什么是offer

  • 自如回应上市传闻:没有上市时间表

    据新京报报道,今日,针对“自如启动上市”的传闻,自如相关负责人回应称:“目前没有上市时间表。”

  • 用算法寻找肿瘤的分子弱点,代码真的能治愈癌症?

    ruxolitinib试验是哥伦比亚大学系统生物学家Andrea Califano历时十年的追求的产物。通过复杂的计算,他对催化癌细胞的分子网络进行建模,并精确定位到转录因子蛋白作为关键因子,从而控制细胞内许多基因表达。

  • mysql怎么处理大表在不停机的情况下增加字段

    MySQL中给一张千万甚至更大量级的表添加字段一直是比较头疼的问题,遇到此情况通常该如果处理?本文通过常见的三种场景进行案例说明。

  • 首个直播带货规范7月施行 主播不得采取流量等数据造假

    明日,国内首个直播带货规范将正式实施。6月24日,中国广告协会发布《网络直播营销行为规范》,这是国内出台的第一个关于网络直播营销活动的专门规范,该规范自2020年7月1日起施行。

  • 小米否认造车:其实是智能遥控车 正在抄写新媒体规范

    今日,针对“造车”传闻,小米商城回应称,其实是认真做了一辆智能遥控车,1:16比例复刻吉姆尼越野悍将形象。7月1日早10点在小米商城开启众筹 。小编正在抄写新媒体规范。

  • 从“地摊收入”到“睡后收入”,领峰环球提供专业指导

    近段时间,地摊经济火了!“摆摊热”成为了朋友圈、媒体圈的“沸点”话题,也引发了强烈舆论关注。众所周知,由于疫情原因,不少人面临着无收入却仍需还房贷、车贷的巨大压力。于是,全国多地松绑地摊经济,鼓励大众创业,大众副业,以期在一定程度上拉动经济发展,化解人们就业危机。 但在地摊"热"中,我们需要进行"冷"思考,毕竟地摊经济不是适合每个人。大家实践之后会发现,稀松平常的摆地摊并非想象中般容易,不仅起早贪黑,?

  • 专业车评人入驻抖音,“老新人”们水土服了吗?

    新抖数据显示,抖音汽车类内容已经出现了 7 个千万级账号和 10 个 500 万级账号,以抖音原生达人为主,如“猴哥说车”和“老丈人说车”,也不乏传统汽车媒体人的成功转型,如“虎哥说车”,他们抢先一步占领了汽车短视频。

  • wxid开头的微信号怎么加好友?专业的,就是快!

    wxid开头的微信号怎么加好友?小伙伴应该有注意到,一些好友的微信号是以wxid开头的,这是怎么回事呢?wxid开头的这串号码是我们在注册微信之后系统自动分配的默认微信号,相当于每个微信账号的身份证明,目前我们每个人可以且只有一次修改微信号的机会,可以将wxid开头的号码更改为自己想要的格式。不知道大家有没有尝试过,使用wxid开头的原始账号搜索好友是无法查找到好友的,这种微信号不能直接用来添加好友,那我们该用什么方

  • 多位明星的宣传+独特的精心设计 这样的天王表真香

    对于天王表在去年上新的X-MAN系列,相信很多人都不陌生,因为这款表在宣传上采用了特殊的方式,在质量过硬的基础上又采用了专利设计。众多明星为天王表做宣传去年8月5号,不老男神张晓龙现身国货领军品牌天王表举办的X-MAN系列新品发布会,与现场粉丝和腕表时尚爱好者一同领略了天王表X-MAN系列新品的潮流魅力。作为娱乐圈少有的学霸男神,张晓龙总是对他从事的每一个领域都保持着无限的探索热忱,时常破壁踏足更多的领域,身份标?

  • 见证历史:“blacklist”等表述将逐渐从源代码中消失!

    美国、欧洲“Black Lives Matter”运动愈演愈烈。本周消息,谷歌决定放弃 Chrome 浏览器中“blacklist(黑名单)“、“whitelist(白名单)”的用法,后续使用“blocklist”和“allowlist”来替代它们。

  • 贝壳找房回应赴美IPO:消息不实 目前尚无具体时间表

    【TechWeb】6月25日消息,针对媒体报道的贝壳找房计划三季度赴美IPO的传闻,贝壳找房方面回应称,消息不实,目前尚无具体时间表。值得注意的是,此前还有消息称,贝壳找房将赴香港IPO。不过,对于网上的报道,贝壳找房方面均表示了否定,称未明确上市的地点和时间。而最新的报道称,贝壳找房已申请在纽约上市,计划最早三季度赴美IPO,最多融资20亿美元。对此,贝壳找房方面回应称消息不实,目前尚无具体时间表。资料显示,贝壳找

  • “钞能力”砸不出红人,专业MCN如何签约腰部KOL?

    在直播、短视频的风口,网红们乘风破浪,MCN们推波助流。网红张大奕母公司如涵控股在纳斯达克上市后,MCN机构被越来越多人了解,网红和MCN的商务合作关系也越来越透明。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天