descendant selectors
kurtharriger opened this issue · 4 comments
In your examples it appears that you need to be explicit about substyles such as:
[:table (use-sub-style table-style :table)
[:thead (use-sub-style table-style :thead)
...
But often in css I see things like this done with selectors such as:
table > thead { ... }
It seems like it would be less verbose if substyles could be applied with selectors? is there a way to do this? or was it avoided for some reason?
Currently, there is no way to use your own CSS selectors with stylefy.
The whole idea was to get rid of the complexity of writing CSS selectors. This is done by attaching styles directly to HTML tags. Thus, there is no need to worry about cascading problems where multiple selectors are competeting about the same items. This is pretty usual in complex web pages and it's sometimes difficult to solve in a good way when the CSS code has grown big. It's even more painful if the CSS code is written in a bad way, which pretty much comes down to handling complex selectors properly. With stylefy, you just define a style, attach it into some HTML tag and that's it. It should be pretty maintainable no matter how many components and styles you end up having. And you can always be sure that the style you are attaching is the style the component is going to have, every single time.
I understand that this can be little bit confusing at first, since CSS works by selecting things from the page with a selector query and them applying style properties to them, while stylefy works by attaching styles directly to HTML tags. But I think it becomes clear when you start thinking "styling components" instead of "styling web page items by selecting them manually".
In your example, I guess you want to construct a table with thead? You can write a component which creates the table and thead tags and attaches styles to them. Now, when ever you want to create another table, you just use the same component again. It has everything you need, including styles. If there is a case when you want your table to look different, you have to ask yourself what is that situation. Does the style of the table depend on some state? If it does, it should be the component's responsibility to change the style of the table depending on that state. Or, if you just want to create arbitrarily different looking tables, you can pass style properties into the component.
Personally, when I started thinking "styling components" instead of "styling web page items with CSS selectors", I haven't needed custom CSS selectors with stylefy.
Okay I thought it might be a deliberate choice but wasn't sure.
I wonder if this limits the ability to customize third party components? or do you just not use any third party components or revert to css if needed?
Depends on what kind of 3rd party components you want to use.
In the example project, I have used Boostrap components as a template for my own components. I have included Boostrap CSS, which gives the styles for those template components, and then I apply my own styles with stylefy. This works, because stylefy does not prevent you from writing CSS to style things on your page if you want.
The only limitation here is that if you use some 3rd party CSS with stylefy, stylefy cannot prevent cascading problems. Most of the time, stylefy's style definition should be the one to be applied, but if there is some 3rd party CSS which wants to apply styles to the same item with stronger selector query, it's going to win. Of course you can always use "!important" statement in your stylefy style definition to force the winner, but this is a bit bad habit.
OK Thanks!