8 ms·
The idea of CSS is great, but it's about time for CSS as a language to improve drastically - currently (even with the latest changes) it is just not powerful en
by valenterry 5y ago
The idea of CSS is great, but it's about time for CSS as a language to improve drastically - currently (even with the latest changes) it is just not powerful enough to be used directly instead of being generated or used in combination with javascript. I wish for the day where I can really just write clean semantic html and then add the CSS afterwards on top of it.
- FrontAid 5y ago> I wish for the day where I can really just write clean semantic html and then add the CSS afterwards on top of it. What exactly is stopping you from doing just that today?
- deleted 5y ago[deleted]
- dgb23 5y agoFor certain layouts and CSS features to work you need to add structure for it AKA additional tags, typically divs and spans because they have no meaning in terms of your document. So your document becomes a mix of semantic structure and then wrappers, containers, pushers, purely visual areas and so on. Also you're going to have things that are specifically redundant for your use-case, but you still add them for consistency and re-usability. CSS would have to be quite a bit more powerful to achieve a clean separation of document structure and layout. It would need things like purely visual grouping mechanisms, reactive or backtracking selectors and HTML itself would probably need to be either a relational or graph structure instead of a tree to actually convey the semantics correctly and consistently.
- valenterry 5y agoOne example is to "inherit" class styles. E.g. let's say I have some html like <p class="warning">be very careful<p> and there is some 3rd party CSS that already has nice styling for a warning paragraph. But it uses .warn as a class, not .warning. I don't want to change my HTML and I also don't want to copy the style. I want to tell CSS that my own .warning should inherit the style of .warn (and maybe adjust it slightly if necessary) That is (to my knowledge) currently not possible.
- Semaphor 5y agoOnly semi-relevant, but this is possible with SASS’s @extend: https://sass-lang.com/documentation/at-rules/extend https://sass-lang.com/documentation/at-rules/extend
- moritzwarhier 5y agoBecause the output is still CSS, this would lead to a lengthened (redundant) selector though. Also, AFAIK it would be impossible with a class that is not part of your SCSS tree. If you are able to import the library CSS in to your own SCSS, OK, no problem. But that would introduce unneeded complexity. If using a bundler and one output file, copying the library CSS rules and applying them to your own could maybe even lead to the same output as @extend - a combined selector .warn, warning (you already kind of addressed all of that already in your "semi-relevant" disclaimer)
- Semaphor 5y ago> (you already kind of addressed all of that already in your "semi-relevant" disclaimer) You make some good points, and I wish I could still edit it to "kind of possible" ;)
- mrweasel 5y agoI'm always surprised when people show what modern CSS and HTML5 is capable of doing. What is it that not currently possible with CSS, which requires JavaScript or generated HTML? I understand there's things CSS can not do, because that not it's purpose. I'm not saying that you're wrong, just genuinely curious.
- dgb23 5y agoA general issue with HTML and CSS is that HTML is a tree and not a graph or relational structure. It's maybe a weird comment but HTML feels clunky and rigid and you sometimes need JS to patch over that clunkyness. (CSS just reacts on HTML structure so it is not specifically at fault. In other words you sometimes need to break out of the HTML tree and move things around so they display and behave as intended by web design. Another thing that comes up often is breaking out of the default UI controls. Some designs are quite playful and interactive, so you end up zooming, moving, replacing and adding stuff based on user input etc. In short: as soon as you have to listen to more or other using events you are going to use JS. Also more classic and conservative designs (example: HN) are essentially one dimensional with a bit of two dimensionality to them, AKA just text that flows through a simple layout. There, you typically can avoid using JS for these kind of things. But if your design is more two dimensional it becomes increasingly harder to avoid JS. Flexbox was an addition that provided some notion of two dimensionality and Grid is a feature that goes further into that direction.
- slver 5y agoUI is a tree in general. Even when you render a graph, that is just a list of nodes and edges in your ui. What would be the purpose of a graph?
- blacktriangle 5y agoTo access elements outside of the tree structure. You can even watch HTML moving in this direction. Forms are a great example. It used to be that the form element would group related input controls. However that now meant that you were stuck linking layout and a form together. The for attribute on input has made HTML forms less tree and more graph-like since you can link input elements to a form outside of the tree.
- The_rationalist 5y agoAdding a :on-click pseudo selector would remove so many needless use of js for dynamically changing classes.
- henrikeh 5y agoWon’t :active do that?
- The_rationalist 5y agoNo, maybe in some limited cases but overall it's not the same
- mrweasel 5y agoYou can wrap things in a checkbox, and use :checked in CSS. It's a little weird and perhaps misuse of input fields.
- The_rationalist 5y agoI know, this is the only non-js way to achieve this but not sure it should be used in production
- c-smile 5y agoJust in case, in Sciter if you will add this: div { behavior:check; } then any div will behave as a checkbox - will toggle :checked flag on element and so we can use: div:checked { color:red; } no JS is required at all.