CSS has a lot of issues. Now that we have a few decades of knowledge, how would you do things differently.
And I'm talking about web styling in general, doesn't have to be "cascading stylesheets" or anything like what we currently have.
For further actions, you may consider blocking this person and/or reporting abuse
Latest comments (65)
Make multiple properties have the same value:
Yeah I don't know if replacing it entirely with constraints is the right way to go, but being able to use them when you need to would be amazing.
To be honest, I've tried to do this for years - if we could throw away everything about CSS and come up with something similar, I'd still end up with something pretty close to CSS. It may look ugly, but it's fit-for-purpose.
You can check out some of the other styling language ideas from a time before CSS
When you compare some of the other ideas out there there are good feature ideas, but the syntax CSS has (which itself is based on X resources for unix programs) is simple, expressive, and flexible.
What I'm excited about now is that even if we want to invent a totally new styling language, we can use valid CSS + valid JavaScript to do it! CSS has "custom properties" (aka CSS variables) that allow us to define custom properties and set values for those properties anywhere in CSS, HTML, or via JavaScript. This is incredibly powerful.
There are also ways you can write CSS rules with custom selectors that get powered by JavaScript functions, as well as custom at-rules that get powered by JavaScript functions as well - so at every level (value, property, selector, stylesheet) you can customize valid CSS and extend it with small amounts of JavaScript logic to help it apply styles in situations, and to elements CSS alone can't quite reach.
The future of styling beyond CSS still looks like writing CSS, it's just designing and using a more declarative, higher-level styling language expressed in valid CSS syntax that is also powered by JavaScript functionality in addition to what CSS can do by itself.
twitter.com/innovati/status/108197...
Good question but to a large degree I feel like this question was asked of HTML and we got CSS. Maybe I'm too old but I like the cascading nature of CSS. It feels better than the old way of having tags and attributes everywhere to style things. I guess I'm in the, "CSS is awesome", camp.
Remember when everything was essentially tables for layouts? 🙃 Or float based? Seeing people saying “centering is easy!” is both heartwarming and makes me feel like I’m 26 going on 80.
Anyway~
In my humble opinion, these would be some things I would include if we could take today’s knowledge and apply it to CSS from the get-go:
Easier support for horizontal and vertical alignment. Grid and Flexbox weren’t always around, and when you had clients that INSISTED on using IE 7, even after it was officially declared to be dead, you are left with a lot of bad memories of shady hacks and cutting corners to make the browser act like it can think vertically, rather than horizontally. This is obviously much easier today, but it definitely wasn’t always something in everyone’s toolbox. Applying the knowledge of today, having this would be a no-brained
Variables: another thing that may seem obvious, because this is becoming common place, css variables were not always a thing. Instead, I was taught to use SCSS for scalabitly and reusability. Going back, these dudes should be included in a redo
Uniform spec interpretation: vendor prefixes are becoming less common, but there are still differences in how browsers render. Firefox handles margin and padding kind of differently without box-sizing, IE supported filters, then dropped them in a new version, and Opera Mobile apparently doesn’t support anything fun, according to caniuse. Even recently, I struggled with a task at work to add gradients around an image so it looks like it fades out of the background. Problem is, Safari interprets transparent gradients as black, where as Chrome and FF think of it as invisible (which is what I wanted). Neither are wrong intrinsically, but they’re different ways of reading the spec that quite honestly ruined my life for 3 days.
4 Nesting: it just makes sense
i would make it easier for developers to contribute to css. right now css is split between whatwg/w3c/mozilla trying to tell browsers what to do, and then the browsers selectively agreeing/disagreeing.
this would involve the creation of some sort of annual or bimonthly convention, summit, or convention where developers get to hear talks from the authorities themselves, and possibly have a forum for discussing them. of course, as with developers being awkward, it would quickly turn into everyone staring at their macbook pro 2015s.
it doesnt hurt to go outside. css has value in its people, as with any other technology. if the people are valued by it, not just with it, css can change more in good faith, then
I personally think that most of the issues commonly associated with CSS are the the result of misuse.
However there are a few things that could be improved:
Here are the two things I'd change:
1: GET RID OF THE DEFAULT USER AGENT STYLESHEET!!! (mostly)
That was only useful back in the 90's when barely any websites had CSS, nowadays it's just not really very useful and hinders developers more than it helps them. Or, make disabling it as simple as this:
2: Better ways to handle
!importantYou know when there's an element where you really want to say
!important !important, because you've already needed to override something in a more specific selector? I think it would be good if you could treat importance likez-index, so you could give it a number - eg.!important(1)or!important(5).About #1, do you know about
* { all : unset; }? MDN LinkNo I did not!!! Thanks for letting me know about that 😁
If you need !important that much, something is probably wrong and you need to refactor your CSS.
I don't use !important much, but having specific control over importance would make CSS more flexible
Just the way it does 😁
CSS is resilient and works
CSS is missing programming language support. I just do everything with Glamorous nowadays because it lets you use all the power of JavaScript, without having to predefine every style condition in CSS.
Most people cringe at the sight of styles in JS, but that's because they think of inline styles. You can easily make a component-style.js file and done, you have separation of concerns.
It wouldn't be a separate language. Bake it into js.
Also selectors being global by default is a flaw.
Bake it into js? NOPE. Separation of concerns is great. Put layout into the a new FLOW language, style into CSS, and actions into JS or web assembly.
You can separate concerns within the same language... look at all other "ui languages". Web dev is the only arena (correct me if I'm wrong) where you need 3 languages (html/css/js) to make a modern day component.
Mobile dev has fewer issues and has separation of concerns with no problem. If you used any preprocessor (less/sass) or template lang (handlebars, etc...) you proved my point. We wouldn't need that if js was the single language. This is one of the reasons why react is so popular.
Before I come off as someone who hates css, I use to only write html/css and hated js. Times have changed.
You would not have to write CSS anymore. You would use a design editor that provided the design for all the browsers and just use the components as they are. The components would be just html elements with special tags on them so you can replace them with different tags if you wanted to make modifications. No CSS is needed.
All the logic for displaying the elements would be a machine representation compiled for the browser to parse and evaluate and would be handled by the design editor.
The design editor could be an external object or a plugin in the browser itself for quick prototyping.
Some low-code platform exists to offer similar capabilities but you still have to write CSS to handle edge cases and browser differences.
😕 Where's the fun in that? 😂😂
Personally I find CSS quite fun to use.
Probably one of the worst and best things with CSS is !important. It shouldn't be needed, but I'm glad it does sometimes.
Parent selectors, definitely.
100%!
I used to center and align stuff using Bootstrap. Now that I've learned Flexbox and CSS Grid, I've found less use of Bootstrap. Though I don't use Grid that much. Flexbox is more useful for my projects.
Same here.