Ionic-framework: RC0 - Impossible to work semantically?

[dgroh]

Short description of the problem:

We work very component based (reactive) and we try to follow css semantics - we almost don't use css classes. This has worked well untill the beta 11. Now, every componet has its own class, i.e ion-card with the classes card-md, card-ios and card-wp.

What behavior are you expecting?

I want to write the following css:

my-card-main-component {
    ion-card-header {
        padding-right: $padding-left-right;
        padding-left: $padding-left-right;
    }
}

This does not work, as the card-md class overrides it.

Steps to reproduce:

1. Try to create css semantically like example above

Which Ionic Version? 2 RC0

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Node Version: v4.6.0

[joshgarwood]

This is also an issue for the built-in utility attributes ionic provides. For instance, placing no-padding on an ion-card-header element doesn't work, because it is overridden by the .card-md ion-card-header { padding: 16px } style.

I would expect that the utility attributes have priority over the other styles, right?

[joshgarwood]

hey folks! any update on this? has it been identified as a bug, or is there something we should do on our end to resolve this?

Thanks!

[brandyscarney]

@dgroh @joshgarwood Hey, we're aware of the issue and we plan on fixing it. :) I opened a similar issue for this here: https://github.com/driftyco/ionic/issues/8765

We're trying to find a good balance between providing styles for the components and making them easy to override. Card header is a special case because the current styling for it is too specific. In the case of toolbar, if you were to move the following css to the end of the css file:

[no-padding] {
  padding: 0;
}

It would take precedence over the .toolbar padding (more info on that in the linked issue above). I need to evaluate all of our components in order to find the best solution.

Each component has to have a class specific to the mode because when they all get combined together all of the styles are in one file. The alternative would be wrapping each component in the mode's class and you would have two levels of specificity, e.g. .md ion-card { and if you wanted to add a class to this card you would have to wrap the class in .md just to change it which isn't a better solution. So the issue here is really that we need to go through and flatten our css so that your css will take precedence. I'll add this to the rc though to look into.

[brandyscarney]

The original issue will be fixed in the rc.3 release. The card header will now be styled using the .card-header-md class. Thanks to PR https://github.com/driftyco/ionic/pull/9133 all components will also get a mode agnostic class, so the <ion-card-header> also gets a .card-header class and <ion-card> also gets .card added. We will continue using classes with the mode to style our components as this is the best way for us to easily change between modes. If you find any other instances where our CSS is too specific, please create an issue for it. Thanks! :)