Stop CSS - APICSS (English)

1,387 views

Published on

APICSS is more style guide than rigid framework. There is no library within here for you to download or install. APICSS is a new way to help spread the Object-oriented CSS technique, and the answer from a CSS file to continue increasing in number of HTML pages.

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

No Downloads
Views
Total views
1,387
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Stop CSS - APICSS (English)

  1. 1. STOP CSS
  2. 2. 
 WARNING The following slides contain unconventional ideas 
 that may be disturbing to some conservative viewers.
  3. 3. To the people who want to stop writing CSS any more.
  4. 4. Introducing the APICSS
  5. 5. What is it? APICSS is more style guide than rigid framework. There is no library within here for you to download or install. APICSS is a new way to help spread the Object-oriented CSS technique, and the answer from a CSS file to continue increasing in number of HTML pages.
  6. 6. People don't like CSS for good reason.
  7. 7. More Page ☟ More Design ☟ More CSS ☟ Hard to organize ☟ Failed
  8. 8. More Page ☟ More Design ☟ More CSS ☟ Hard to organize ☟ Failed ☜ Stop here
  9. 9. More Page ☟ More Design ☟ More CSS ☟ Hard to organize ☟ Failed ☜ Better stop here
  10. 10. You can stop.
  11. 11. How ?
  12. 12. BEM ? Block, Element and Modifier
  13. 13. No Sorry, BEMer.
  14. 14. OOCSS × SMACSS Object Oriented CSS × Scalable and Modular Architecture CSS
  15. 15. Name is
  16. 16. APICSS CSS meets API
  17. 17. Use CSS as API that rarely modified.
  18. 18. 10 CSS files help to make OOCSS happen for real.
  19. 19. @import 1. variables 2. fonts 3. normalize 4. elements 5. forms 6. icons 7. objects 8. components 9. containers 10. utilities
  20. 20. @import 1. variables 2. fonts 3. normalize 4. elements 5. forms 6. icons 7. objects 8. components 9. containers 10. utilities Use these CSS as filters. You shouldn't modify existing classes. But you can add new lines.
  21. 21. @import 1. variables 2. fonts 3. normalize 4. elements 5. forms 6. icons 7. objects 8. components 9. containers 10. utilities 11. uncommon Use these CSS as filters. You shouldn't modify existing classes. But you can add new lines.
  22. 22. @import 1. variables 2. fonts 3. normalize 4. elements 5. forms 6. icons Use these CSS as filters. You shouldn't modify existing classes. But you can add new lines. 7. objects 8. components 9. containers 10. utilities 11. uncommon Use this unless you can provide styles with above.
  23. 23. The Goal is nothing to add on CSS;
 because you have enough already.
  24. 24. But why we haven't achieve yet?
  25. 25. Failed example of Bootstrap
  26. 26. Failed example of Bootstrap div class="alert alert-info"
  27. 27. Failed example of Bootstrap div class="alert alert-info" div class="alert alert-danger"
  28. 28. Failed example of Bootstrap • Designs are so limited.
 People want more flexibility and variety. • You can't pull the container style and the content style separately. • Class name contains ''context'' that makes hard to use for different purpose.
  29. 29. Failed example of Bootstrap • Designs are so limited.
 People want more flexibility and variety. • You can't pull the container style and the content style separately. • Class name contains ''context'' that makes hard to use for different purpose.
  30. 30. Failed example of Bootstrap • Designs are so limited.
 People want more flexibility and variety. • You can't pull the container style and the content style separately. • Class name contains ''context'' that makes hard to use for different purpose.
  31. 31. Failed example of Bootstrap • Designs are so limited.
 People want more flexibility and variety. • You can't pull the container style and the content style separately. • Class name contains ''context'' that makes hard to use for different purpose.
  32. 32. Failed example of Bootstrap div class="alert alert-danger" This context.
  33. 33. 
 WARNING Here's the thing.
  34. 34. Traditional approach div class="alert alert-danger"
  35. 35. APICSS approach div class="roundedbox roundedbox-red padding-15px" span class="color-red"
  36. 36. Textbook says ...
  37. 37. Textbook says ... Bad .color-red { color: red; } Good .color-caution { color: red; }
  38. 38. ''Class name should contain a semantic phrase
 to prepare for changing the style in the future.'' ‒ Textbook
  39. 39. ''Class name should contain a semantic phrase
 to prepare for changing the style in the future.'' ‒ Textbook
  40. 40. Failed ''Class name should contain a semantic phrase
 to prepare for changing the style in the future.'' ‒ Textbook
  41. 41. CSS HTML
  42. 42. One Many
  43. 43. Fixing CSS effects a lot of HTML. Sometimes it's dangerous.
  44. 44. More Page ☟ More Design ☟ More CSS ☟ Hard to organize ☟ Failed
  45. 45. Case of APICSS
  46. 46. Change design to modify HTML not CSS.
  47. 47. Before div class="roundedbox roundedbox-red padding-15px" span class="color-red"
  48. 48. After div class="roundedbox roundedbox-blue padding-15px" span class="color-red"
  49. 49. You can check the result by sight.
  50. 50. Also you can replace multiple HTML files at once.
  51. 51. Good .color-red { color: red; } Bad .color-caution { color: red; }
  52. 52. ''Class name should be based on their own properties
 to prepare for using whatever purpose in the future.'' ‒ APICSS rule
  53. 53. ''Class name should be based on their own properties
 to prepare for using whatever purpose in the future.'' ‒ APICSS rule
  54. 54. It works ''Class name should be based on their own properties
 to prepare for using whatever purpose in the future.'' ‒ APICSS rule
  55. 55. Good .color-red { color: $red; } Good .color-yellow { color: $yellow; } Good .color-lightblue { color: $lightblue; } Good .font-monospace { font-family: $monospace; } Good .font-serif { font-family: $serif; } Good .font-sanserif { font-family: $san-serif; }
  56. 56. Result Dramatically reduced the frequency
 of touching CSS.
  57. 57. APICSS CSS meets API
  58. 58. OOCSS × SMACSS Object Oriented CSS × Scalable and Modular Architecture CSS
  59. 59. STOP CSS
  60. 60. Conclusion
  61. 61. Conclusion • It's a new way to stop CSS in hundreds of HTML. • Distributed writing method for each 11 files. • You shouldn't modify existing classes. • Class name is based on properties not purpose.
  62. 62. Tips
  63. 63. Tips • Do implement design elements separately for
 you can pull these separately. • Related classes must have same prefix like SMACSS for easy organizing. • Avoid using background image as possible.
  64. 64. Thank you.
  65. 65. byodkm.com/apicss
  66. 66. Copyright 2013 @tomohiro_kasuga. All right reserved.

×