Vuesax: Too much nesting in CSS (specificity issue)

Created on 16 Oct 2018  路  7Comments  路  Source: lusaxweb/vuesax

I'm having a hard time customizing my own theme because of a badly written CSS that is nested too much. There's no doubt you're a good designer man, but please read about CSS Specificity or CSS specificity-graph

Code like this is a nightmare to override and maintain:
.vs-sidebar .vs-sidebar-items .vs-sidebar-item a
Not to mention I have found some !important declarations, which is a no no in a framework.

Please take a look at some of your CSS and make it more extendable by lowering specificity as much as possible.

enhancement help wanted

Most helpful comment

Hi @Jacrys, I think you misunderstood my comment. Clearly I'm not talking about utility classes, which in your example of bootstrap and foundation, they totally make sense to have !important declarations. If it is a utility class, which do one thing and should be specific, like .text-center { text-align: center !important; } where they should work on wherever context, then it's ok.

I'm referring to !important declarations on general components, for example I've seen in sidebar, which can be hard to override for custom themes. In theory, this can be totally fixed by using a flat class approach, like BEM for example (although I totally understand that the author has his own methodology).

By the way, "_the latter I see in your portfolio_", this is just my "playground" account, you won't see any serious code work, if you're the type of guy who will check first the profile of others before commenting/arguing.

Thanks, have a nice day!

All 7 comments

thanks for advise, you can send a PR to these changes?
i appreciate

Thank you very much I will improve that aspect so that the frame is more stable and easy to customize

Not to mention I have found some !important declarations, which is a no no in a framework.

I am not sure that's true, @byrnecode. Both Bootstrap and Foundation, the latter I see in your portfolio you have used, use !important.

The important thing (pun intended) is not to use it in place of specificity, but to ensure that utility classes (such as the ones in a framework) do not break if/when a user defines a rule with a higher specifictiy1

Hi @Jacrys, I think you misunderstood my comment. Clearly I'm not talking about utility classes, which in your example of bootstrap and foundation, they totally make sense to have !important declarations. If it is a utility class, which do one thing and should be specific, like .text-center { text-align: center !important; } where they should work on wherever context, then it's ok.

I'm referring to !important declarations on general components, for example I've seen in sidebar, which can be hard to override for custom themes. In theory, this can be totally fixed by using a flat class approach, like BEM for example (although I totally understand that the author has his own methodology).

By the way, "_the latter I see in your portfolio_", this is just my "playground" account, you won't see any serious code work, if you're the type of guy who will check first the profile of others before commenting/arguing.

Thanks, have a nice day!

Hi @brunokunace, @luisDanielRoviraContreras, thanks for the response! I really wanted to help and support this project because I truly love the aesthetics of the components. Too bad I still got my hands full with other projects.. When I got more time, I'll make sure to contribute! Thanks.

@byrnecode great I hope you can help us, tieness all the reason and we are going to change the methodology and make it better so that the merco is more usable and customizable with respect to css

Thank you very much and if there is anything else, do not hesitate to advise the idea is to improve and fix the errors

The specificity was improved in all the components for a better handling and change of them, almost all the important ones were eliminated (those that were found)

@byrnecode thank you very much for the contribution and contribute to make a change so necessary for the framework

Was this page helpful?
0 / 5 - 0 ratings

Related issues

andresilva-cc picture andresilva-cc  路  3Comments

jupox picture jupox  路  3Comments

MeastBlue picture MeastBlue  路  3Comments

eusonlito picture eusonlito  路  3Comments

sangdth picture sangdth  路  4Comments