CSS specificity and general guideline


I really like ionic for the most part but really can’t help wining seeing the CSS. It is almost impossible to override because every single element has super high specificity and the html structure is dictated strongly by the generated SCSS selectors. I’d love to know if you have the same issues and how do you work with it?


You can rebuild the base CSS using Sass to your own liking, though it doesn’t necessarily address what you are asking here.

I prefer very specific CSS for reusable components. It hardens the components so you don’t accidentally override the size of a button or the like. In fact, I can’t wait for ShadowDOM to come and hide all of the stylings from us so we can focus on what styles are for our application only.

Its one thing to be changing colors, fonts, and the like, and another thing to try and change things like size and display of tabs. The difficulty is that much of the component styling was designed and has been tested on various devices, and overriding could easily introduce bugs. Perhaps I need an example of what you want to change, but in general I think its best to leave as much of the core component styling in place as possible. If you are trying to twist a component to behave differently, I would consider if it might be more appropriate to create a new directive to handle it instead.