stop css - apicss (english)
DESCRIPTION
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.TRANSCRIPT
STOP CSS
!WARNING
The following slides contain unconventional ideas that may be disturbing to some conservative viewers.
To the people who want to stop
writing CSS any more.
Introducing the APICSS
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.
People don't like CSS for good reason.
More Page
☟
More Design
☟
More CSS
☟
Hard to organize
☟
Failed
More Page
☟
More Design
☟
More CSS
☟
Hard to organize
☟
Failed
☜ Stop here
More Page
☟
More Design
☟
More CSS
☟
Hard to organize
☟
Failed
☜ Better stop here
You can stop.
How ?
BEM ?Block, Element and Modifier
NoSorry, BEMer.
OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS
Name is
APICSSCSS meets API
Use CSS as API that rarely modified.
10 CSS files help to make
OOCSS happen for real.
@import1. variables
2. fonts
3. normalize
4. elements
5. forms
6. icons
7. objects
8. components
9. containers
10. utilities
@import1. 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.
@import1. 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.
@import1. variables
2. fonts
3. normalize
4. elements
5. forms
6. icons
7. objects
8. components
9. containers
10. utilities
11. uncommon Use this unless you can provide styles with above.
Use these CSS as filters. You shouldn't modify existing classes. But you can add new lines.
The Goal is nothing to add on CSS;
because you have enough already.
But why we haven't achieve yet?
Failed example of Bootstrap
Failed example of Bootstrap
div class="alert alert-info"
Failed example of Bootstrap
div class="alert alert-info"
div class="alert alert-danger"
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.
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.
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.
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.
Failed example of Bootstrap
div class="alert alert-danger"
This context.
!WARNING
Here's the thing.
Traditional approach
div class="alert alert-danger"
APICSS approach
div class="roundedbox roundedbox-red padding-15px" span class="color-red"
Textbook says ...
Textbook says ...
Bad .color-red { color: red; }
Good .color-caution { color: red; }
‒ Textbook
''Class name should contain a semantic phrase
to prepare for changing the style in the future.''
‒ Textbook
''Class name should contain a semantic phrase
to prepare for changing the style in the future.''
‒ Textbook
''Class name should contain a semantic phrase
to prepare for changing the style in the future.''
Failed
CSS HTML
One Many
Fixing CSS effects a lot of HTML.
Sometimes it's dangerous.
More Page
☟
More Design
☟
More CSS
☟
Hard to organize
☟
Failed
Case of APICSS
Change design to modify HTML not CSS.
Before
div class="roundedbox roundedbox-red padding-15px" span class="color-red"
After
div class="roundedbox roundedbox-blue padding-15px" span class="color-red"
You can check the result by sight.
Also you can replace multiple HTML files at once.
Good .color-red { color: red; }
Bad .color-caution { color: red; }
‒ APICSS rule
''Class name should be based on their own properties
to prepare for using whatever purpose in the future.''
‒ APICSS rule
''Class name should be based on their own properties
to prepare for using whatever purpose in the future.''
‒ APICSS rule
''Class name should be based on their own properties
to prepare for using whatever purpose in the future.''
It works
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; }
Result
Dramatically reduced the frequency
of touching CSS.
APICSSCSS meets API
OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS
STOP CSS
Conclusion
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.
Tips
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.
Thank you.
byodkm.com/apicss
Copyright 2013 @tomohiro_kasuga. All right reserved.