CSS组织/结构

前端之家收集整理的这篇文章主要介绍了CSS组织/结构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我一直在努力寻找组织CSS代码的最佳方法,特别是在大型网站上.我对编写风格以及人们如何构建和管理代码的兴趣不大.

我一直在关注这种结构,我觉得它的可维护性很好,但我想对此有所了解并听取其他方法

  1. /*=======================================
  2. 1. =reset
  3. =======================================*/
  4. /**
  5. Anything but * reset
  6. **/
  7. /*=======================================
  8. 2. =base
  9. =======================================*/
  10. /**
  11. Base rules so naked HTML has basic style and displays consistently x-browser
  12. **/
  13. /*=======================================
  14. 3. =base forms
  15. =======================================*/
  16. /**
  17. Base form framework
  18. **/
  19. /*=======================================
  20. 4. =base site
  21. =======================================*/
  22. /**
  23. Rules common across the majority of pages
  24. e.g. header,footer,main columns,navigation,search bar etc.
  25. **/
  26. /*=======================================
  27. 5. =recurring styles
  28. =======================================*/
  29. /**
  30. Re-useable snippets -- not to include positioning / structure etc.
  31. e.g. buttons,icons etc.
  32. **/
  33. /*=======================================
  34. 6. =recurring modules
  35. =======================================*/
  36. /**
  37. Re-usable modules common to multiple pages/views but not majority
  38. e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
  39. **/
  40. /*=======================================
  41. 7. =homepage
  42. =======================================*/
  43. /**
  44. contains rules only applicable to homepage
  45. **/
  46. /*=======================================
  47. 8. =about page
  48. =======================================*/
  49. /**
  50. contains rules only applicable to about page
  51. **/
  52. /*=======================================
  53. 9. =contact page
  54. =======================================*/
  55. /**
  56. contains rules only applicable to contact page
  57. **/
  58. ...and so on

任何想法将不胜感激.

丰富

最佳答案
我的基本格式是顶部的块注释,并带有标题注释(与您的类似)潜入主要区域.

  1. /*
  2. * Title of the site
  3. * Author
  4. * Date created
  5. * Last updated
  6. *
  7. * 1-2 line description of what the style sheet is for.
  8. *
  9. */
  10. /* Reset (probably imported)
  11. -------------------------------------------------------------------------------- */
  12. ...
  13. /* A Framework (probably imported)
  14. -------------------------------------------------------------------------------- */
  15. I like YUI Grids
  16. /* Global
  17. -------------------------------------------------------------------------------- */
  18. Styles for basic elements like: body,h1-h6,p,ul,li,...,and often a wrapper.
  19. /* Header
  20. -------------------------------------------------------------------------------- */
  21. Any styles specifically for the header block (this is usually short)
  22. /* Body
  23. -------------------------------------------------------------------------------- */
  24. Basic layout for the main body block
  25. /* Footer
  26. -------------------------------------------------------------------------------- */
  27. Similar to header
  28. /* Utility Classes
  29. -------------------------------------------------------------------------------- */
  30. Things like
  31. .align-center { text-align: center; };
  32. .hide { display: none !important; }
  33. ...
  34. /* Specific Pages
  35. -------------------------------------------------------------------------------- */
  36. Those are my usual subsections (separated by 2 line breaks). Beyond that,short
  37. rules that only apply to a certain page or subset of pages will get a section like
  38. this.

还有一些提示

缩进特定小节的后代.*

  1. div#left-col { ... }
  2. * html #left-col { ... }
  3. #left-col p { ... }
  4. #left-col ul { ... }
  5. * html #left-col ul { ... }
  6. #left-col li { ... }

*但是keep rules efficient与选择器中包含的后代数量.通常,我会写:

  1. div#left-col li span { font-weight: bold; }

代替:

  1. div#left-col ul li a span { font-weight: bold; }

请记住,这正在改变规则选择的内容,但只要它适用于您的页面并且可维护,就可以了.

字母表属性.

  1. body {
  2. color: #ccc;
  3. font-family: Helvetica,Arial,sans-serif;
  4. padding: 2em;
  5. -webkit-something: some value;
  6. }

将短规则折叠为1行(如果它不会损害可维护性).

  1. div#left { float: left; margin-top: 30px; width: 300px; }

猜你在找的CSS相关文章