css的十个不要,我却占了九个
2017-05-14 22:20
288 查看
在我求教别人样式问题的时候,别人说的最多的一句就是——我*你这是写的啥!
今天在社区看到一篇写css十个不要的问题,觉得羞愧,拿出来与大家分享。
原文链接:http://www.codeceo.com/article/css-10-bad-practices.html
1、不要滥用类。
我回头看看之前写的代码,只要是个div就加一个class,只要是个有样式的标签,就加个class,id名更不用说了。后来我会用了css选择器,各种>、+、nth-child(1)...各种加,以至于后来的同事看我的代码,都是一脸佩(嫌)服(弃)的表情。
2、不要把一切都扔进一个css文件中
区分css使代码更容易管理。这个确实有帮助到我。
3、不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)
我最常用的就是这个,什么头部左边(header-left)、头部右边(header-right),还有就是class-30、class-red....
4、不要忘记注释
一开始我写代码从来不写注释,因为我觉得我写的我都能看懂,后来有一些我自己也看不懂了,再后来,我记得在代码后面加注释了,但是只会加一行或者是我看得懂的注释,并没有什么乱用。
5、不要害怕开发工具
每个浏览器都有自己的F12,我经常用的就是谷歌,感觉一换浏览器,我就没法调试了。
6、不要害怕覆盖
现在做的项目,是套用了饿了么的ui框架和muse的ui框架,他并不是完全符合设计图的要求,所以,每当这个时候,我就比较苦恼,因为这种框架的东西,确实是牵一发而动全身的,尤其是这些巨大的框架的更新,往往会引起很大的变动。
7、不要滥用,很重要!
css的整体思路是,从一个到另一个地“层叠“样式。重要是要记住排雷一样地踏遍所有早先的样式!
8、不要使用大量网络字体
这也是显而易见的,但有时候喜欢自己排版,只在网站上使用一个或者两个网络字体,然后回归到浏览器的默认设置,以保持网站的优化。
9、不要手动编码所有的css
饿了么的住色调是蓝色,而我们的网页是黄色,几乎所有的样式都需要重新改,所以饿了么提供了一套更改方案。用起来特别顺手。
10、不要让css过于臃肿
空格会占用css文件的空间,所以有必要对css文件进行压缩打包,我们的项目也是这么做的。哈哈哈~
以上。
敲代码需进步,要看清自己,看清自己的代码,跟优秀的人多交流。
希望大家有则改之,无则加勉。
今天在社区看到一篇写css十个不要的问题,觉得羞愧,拿出来与大家分享。
原文链接:http://www.codeceo.com/article/css-10-bad-practices.html
1、不要滥用类。
我回头看看之前写的代码,只要是个div就加一个class,只要是个有样式的标签,就加个class,id名更不用说了。后来我会用了css选择器,各种>、+、nth-child(1)...各种加,以至于后来的同事看我的代码,都是一脸佩(嫌)服(弃)的表情。
2、不要把一切都扔进一个css文件中
区分css使代码更容易管理。这个确实有帮助到我。
3、不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)
我最常用的就是这个,什么头部左边(header-left)、头部右边(header-right),还有就是class-30、class-red....
4、不要忘记注释
一开始我写代码从来不写注释,因为我觉得我写的我都能看懂,后来有一些我自己也看不懂了,再后来,我记得在代码后面加注释了,但是只会加一行或者是我看得懂的注释,并没有什么乱用。
5、不要害怕开发工具
每个浏览器都有自己的F12,我经常用的就是谷歌,感觉一换浏览器,我就没法调试了。
6、不要害怕覆盖
现在做的项目,是套用了饿了么的ui框架和muse的ui框架,他并不是完全符合设计图的要求,所以,每当这个时候,我就比较苦恼,因为这种框架的东西,确实是牵一发而动全身的,尤其是这些巨大的框架的更新,往往会引起很大的变动。
7、不要滥用,很重要!
css的整体思路是,从一个到另一个地“层叠“样式。重要是要记住排雷一样地踏遍所有早先的样式!
8、不要使用大量网络字体
这也是显而易见的,但有时候喜欢自己排版,只在网站上使用一个或者两个网络字体,然后回归到浏览器的默认设置,以保持网站的优化。
9、不要手动编码所有的css
饿了么的住色调是蓝色,而我们的网页是黄色,几乎所有的样式都需要重新改,所以饿了么提供了一套更改方案。用起来特别顺手。
10、不要让css过于臃肿
空格会占用css文件的空间,所以有必要对css文件进行压缩打包,我们的项目也是这么做的。哈哈哈~
以上。
敲代码需进步,要看清自己,看清自己的代码,跟优秀的人多交流。
希望大家有则改之,无则加勉。
相关文章推荐
- 人生的十个不要等
- css自定义字体(图标)-有些图标不要在P图了
- 开始工作之后的十个不要
- 传说中十个看完九个出家
- 通过W3C XHTML1.0及CSS标准需要注意的九个问题
- 人生的十个不要
- 将CSS压缩至一行的十个步骤
- [转]能用HTML/CSS解决的问题就不要使用JS
- 为什么在CSS中不要再使用@import
- 人生的十个不要等
- Div+CSS网页布局中CSS无效的十个常见原因
- 十个男人看了,九个成了富人
- 本地开发HTML如何引入JS和CSS?action要学sevlet最好不要全局变量?
- Bootstrap CSS 编码规范之不要使用 @import
- CSS布局的九个诀窍,学ccs不再难
- web前端CSS开发中的10个不要
- 人生感悟:传说十个看完,九个有领悟
- 【绿网天下·教育篇】家庭教育的十个“不要”
- DivCSS网页布局中CSS无效的十个常见原因
- DIV+CSS容易犯的十个错误