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.