html css 最佳实践,30个CSS最佳实践 | Soo Smart!

1. Make it Readable

书写格式可读

2. Keep it Consistent

当你开始创建自己的CSS标准时，你就已经开始变得更专业更精通。标准是一致的保证。

3. Start with a Framework

建议先从使用框架开始，至少框架有一年左右的使用经历。

4. Use  a Reset

Reset目的是为了减少浏览器默认行为的差异。可以参考MeyerWeb

5. Organzie the stylesheet with a Top-down structure

这样可以方便查找样式

6. combine Elements

这样可以监视重复，提倡共用。

7. Create Your HTML first

很多设计者创建HTML的同时创建相应的css。 这其实反而会浪费更多的时间。

8. Use Mulitple classes

"If you must returns to your HTML to change the presentation or styling of the page, you're doing it wrong". 所以应该classname 语义化。 left, right不是语义的，因为如果某一天你希望将left换成right时，你就必须去修改你的HTML.

9. Use the right Doctype

10. Use shorthand

11. Commetn your css

12. Understand the difference between block vs inline Element

块元素有：div, h1-h6, p, ul, li, table, blockquote, pre, form

两种都支持: span, a, strong, em, img, br, input, abbr, acronym

13. Alphabetize your properties

字母排序属性，这条没有那么重要

14. Use css Compressors

15.Make use of Generic classses

16. Use: "margin: 0 auto" to center layouts

17. Use Firebug

18. Don't Just Wrap a div around it

19. Hack Less

20. Use absolute position sparingly

21.Use Text-transform

22.Don't use negative margins to hide your H1

23. Validate your css and XHTML

24.ems VS. Pixels

em逐渐使用的多起来，成为默认设置。

25. Don't underestimate the list

26. Avoid extra selectors

不要使用过多的选择器，应该尽可能的更简洁

27.Adding Margins and Padding to All

不同的浏览器或浏览器的不同版本其渲染器都不同。

28. When Ready, try object oriented CSS

29. Use Multiple Style sheets

为了减少HTTP请求，开发时模块化css,开发多个css文件，部署环境下，将这些css文件再合并到一起

30.Check for Closed Elements first when debugging

参考文章：

30 CSS Best Practices for Beginners： http://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741

What Makes For a Semantic Class Name?： https://css-tricks.com/semantic-class-names/

Object Oriented CSS：  https://github.com/stubbornella/oocss/wiki

CSS Tools: Reset CSS： http://meyerweb.com/eric/tools/css/reset/index.html

CSS Shorthand Guide： http://www.dustindiaz.com/css-shorthand/

Modular CSS naming conventions： http://thesassway.com/advanced/modular-css-naming-conventions

Named Cascading Style Sheets: https://github.com/redaxmedia/ncss