帮我写出更好的CSS代码的一些技巧

最爱艾美丽

最爱艾美丽

2016-02-19 23:41

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享帮我写出更好的CSS代码的一些技巧,希望可以对大家能有小小的帮助。

1. Reset

真的,要一直使用一个reset,无论是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset,一定要使用。

这可以简单到仅仅将所有元素中的margin和padding属性去掉:

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和YUI的Resets样式是很棒的,但对我来说,它们走的太远了。我想要你清除所有东西,然后再重新定义元素的许多属性。这就是Eric Meyer所推荐的。如果有更有效的方法是用它的话,你不应该只是拿来他的样式文件,将它直接放到自己的项目中提炼它,在它的基础上重建,把它变成你自己的。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

哦,请不要再这样:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

* { margin: 0; padding: 0; }

它被使用的地方太多了,如果把一个单选框的padding去掉,你觉得会发生什么事情? 表单元素有的时候会有些比较时髦的表现,所以最好还是让它们保持原状吧。

2. 按字母排序

一个小测试
下面的两个例子,你认为哪个能较快找到margin-right属性的位置?

例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;
}

例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;
}

不要告诉我例2没有例1快!通过将这些样式的属性按照字母排序,你所创建的连贯性将帮你减少花费在寻找某个属性的时间。

我知道有的人以这种方法组织排序,其他人又用另外的方法来组织样式的顺序。但是在我所在的公司,我们一致下定决心按照字母来排序。当你和其他人共同开发代码的时候,这种方法肯定对你有用。每次看到某个样式表没有按照字母排序,我就很讨厌,因为它们看起来比较凌乱无序

展开更多 50%)
分享

猜你喜欢

帮我写出更好的CSS代码的一些技巧

Web开发
帮我写出更好的CSS代码的一些技巧

写出更好的代码CSS代码书写技巧分享

Web开发
写出更好的代码CSS代码书写技巧分享

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一些顶级CSS技巧

Web开发
一些顶级CSS技巧

网页文字应用CSS的一些技巧

Web开发
网页文字应用CSS的一些技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

FSO一些代码

Web开发
FSO一些代码

初学CSS和标准建站的一些CSS常用技巧

Web开发
初学CSS和标准建站的一些CSS常用技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

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

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

啦啦啦、啦啦啦、我是外婆的小红帽 幸福男女生QQ签名

啦啦啦、啦啦啦、我是外婆的小红帽 幸福男女生QQ签名
下拉加载更多内容 ↓