API CSS

791 views

Published on

API CSS is the CSS Method to use the CSS as API that rarely modified. It works really well.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
791
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

API CSS

  1. 1. API CSS
  2. 2. I can
 explain
  3. 3. Why CSS Sucks
 for you.
  4. 4. You are trapped by
  5. 5. CSS dogma
  6. 6. or
  7. 7. You don’t know the basic rules.
  8. 8. Rule #1
  9. 9. Cascading
  10. 10. You know that.
  11. 11. But, how to stop it?
  12. 12. ul li {…}
  13. 13. ul li {…} ul li li {…}
  14. 14. ul li {…} ul li li {…} ul li li li {…}
  15. 15. ¯_(ツ)_/¯
  16. 16. Try this:
  17. 17. ul > li {…}
  18. 18. or
  19. 19. Use
 classed div
  20. 20. .list-item {…}
  21. 21. Trust me, It works.
  22. 22. Rule #2
  23. 23. Specificity
  24. 24. What’s that?
  25. 25. For
 example:
  26. 26. <h1 class=
 “blue red pink”>
  27. 27. Which color is applied?
  28. 28. Pink?
  29. 29. Maybe
  30. 30. You can’t
 tell until
  31. 31. you go to check the Specificity.
  32. 32. .blue {color:blue} .red {color:red} .pink {color:pink}
  33. 33. If so,
  34. 34. h1
  35. 35. .blue {color:blue} h1.red {color:red} .pink {color:pink}
  36. 36. If so,
  37. 37. h1
  38. 38. Why?
  39. 39. .blue {color:blue} h1.red {color:red} .pink {color:pink}
  40. 40. h1.red {…}
 is more specific.
  41. 41. Order
 doesn't matter.
  42. 42. Unless
  43. 43. Specificities are all equal,
  44. 44. order
 do
 matter.
  45. 45. Take care of
 Specificity.
  46. 46. Rule #3
  47. 47. Browsers
 are not
 all same.
  48. 48. They are slightly different.
  49. 49. Use the normalize css.
  50. 50. http:// necolas.github.io/ normalize.css
  51. 51. If you know the basics,
  52. 52. probably
 you heard
  53. 53. the CSS dogma,
  54. 54. Naming Convention.
  55. 55. “Class name should be
 a semantic phrase …
  56. 56. to prepare for modify the style in the future.”
  57. 57. like this,
  58. 58. .red {…}
  59. 59. .red {…}
  60. 60. .red {…} .caution {…}
  61. 61. .caution {…}
  62. 62. .caution {…} more semantic
  63. 63. Forget this.
  64. 64. This idea is too old.
  65. 65. and against the software development approach.
  66. 66. O.C.P.
  67. 67. Open/Closed Principal
  68. 68. “software entities should be open for extension, …
  69. 69. but closed for modification.”
  70. 70. It’s true.
  71. 71. Trust me. (again)
  72. 72. You can't modify the existing classes.
  73. 73. You can’t.
  74. 74. .caution {…}
  75. 75. .caution {…}
  76. 76. .caution {…} .color-red {…}
  77. 77. .color-red {…}
  78. 78. open for extension .color-red {…} closed for modification
  79. 79. .extention-modifier {…}
  80. 80. This is called
  81. 81. API CSS
  82. 82. Learn this.
  83. 83. Your CSS sucks
  84. 84. for more detail
  85. 85. http:// byodkm.com/ apicss
  86. 86. Thank you.

×