DEV Community

Ben Halpern
Ben Halpern

Posted on

If you could start over from scratch, how would CSS work?

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.

Discussion (66)

Collapse
nektro profile image
Meghan (she/her) • Edited on

Wait, people don't like CSS? To me, CSS actually seems like one of the most well done parts about the web platform. Not only from readability but it makes really good tradeoffs between verbosity and character count that makes CSS really really easy to read when written well. When writing CSS we have to describe complex relationships between elements, their state, and their relationship to other elements. With CSS, we are able to accomplish this with incredible ease.

The only parts I would change are:
- Make CSS cascade more and support nesting style blocks (like S[A/C]SS)
- Allow HTML Imports so we can write CSS in a <style> and not forced to use JS
- Take a another look at existing properties and reevaluate them.

Collapse
georgeoffley profile image
George Offley

You have clearly never tried to center something among several other divs.

Collapse
nektro profile image
Meghan (she/her)
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
Thread Thread
pedro profile image
Pedro M. M. • Edited on

Flexbox is the best thing ever happened to CSS. ❤️

Thread Thread
georgeoffley profile image
George Offley

Agreed. Makes things so easy. Makes me hate the world a little for wading through the preflexbox world.

Thread Thread
ra9 profile image
Carlos Nah

What happens to css grid then?

Thread Thread
anechol profile image
Ashley E

Late reply sorry, but nothing. Grid and Flex are to be used in tandem with one another.

Collapse
georgeoffley profile image
George Offley

Biggest CSS issue that has been kind of but not really fixed is the constant browser hacks needed.

Collapse
alainvanhout profile image
Alain Van Hout • Edited on

The issue here is not character count, but predictability. The way(s) CSS works makes it so that there is lots of unintended and unexpected interactions.

Collapse
nektro profile image
Meghan (she/her)

I'm curious, what have you run into that was unpredictable?

Thread Thread
alainvanhout profile image
Alain Van Hout • Edited on

Off the top of my head: adding margins that are ignored because other positioning takes precedence (I’m not talking about specificity here).

I’m curious that you don’t know what I mean with my previous remark, since unpredictability is pretty much a staple of CSS, so much so that it’s spawned jokes like mobile.twitter.com/thomasfuchs/sta....

Thread Thread
hissvard profile image
Manuel Luciani

I'd say the weirdest thing I've run into in that regard is margin collapse - like, why?

Thread Thread
nektro profile image
Meghan (she/her) • Edited on

if you have a ul with some li and then on the li set display: inline then yes, margin will be ignored, but you can fix it by using inline-block. All inline elements ignore vertical margin. But this is more an "issue" with the expected vs actual result of the layout engine and not from CSS

Thread Thread
hissvard profile image
Manuel Luciani

Yeah, although what I was referring to is the way only the bigger margin is considered in some situations - you'd usually expect elements' margins to add up

Thread Thread
nektro profile image
Meghan (she/her)

The selector with the most specificity is the one that gets applied. If you have a element in an element in an element etc and they all have a margin then the margin does add up.

Thread Thread
adrianirwin profile image
Adrian Irwin • Edited on

Margin collapse makes a lot of sense in textual content heavy documents. A typical example might be a li followed by a an h3 element, and generally the header would have an ample top margin, so there is no need to combine the trailing margin of the list with the leading margin of the header, it would simply lead to excessive white-space.

Useful for the kind of documents HTML was developed for, but not so useful once intricate visual designs and layouts enter the scene.

Thread Thread
nateous profile image
Nate

I agree with you, Meghan. Most of the hardship comes from not understanding how to do something in a simple way with CSS. As soon as we got rounded corners designers wanted something else we couldn't do easily. Haha

Collapse
ethan profile image
Ethan Stewart

Had some fun with some of that unexpected behavior recently, apparently if you set overflow to auto on one axis (e.g. overflow-x), you can't set the other axis to visible. And it's in the spec, so it's definitely intentional 😆

Collapse
pedro profile image
Pedro M. M.

Well, that’s the definition of design.

Collapse
james2m profile image
James McCarthy

There is so much I would bin I can’t even begin. But top of the list, like way top would be no cascade. It’s such an impractical way of re-using code and over long periods in busy projects always leads to a knotted ball of string.

Way more practical is styling each component and encouraging component re-use.

Collapse
chrisvasqm profile image
Christian Vasquez

Collapse
jochemstoel profile image
Jochem Stoel

Thanks Christian for your wisdom and insight.

Collapse
ben profile image
Ben Halpern Author

Here's a post that doesn't answer this question but might provide some food for thought:

Collapse
nektro profile image
Meghan (she/her) • Edited on

That was definitely a great read, and I definitely didn't try to top comment the thread by just saying CSS is great. I totally see where they're coming from, and tbh I don't think the web can do what Eric talked about. At least yet. Houdini has some good promise to make CSS a lot better and Custom Elements (with more browser support) might make HTML more expressive.

caniuse.com/#feat=css-paint-api
caniuse.com/#feat=custom-elementsv1

I think one of the biggest drawbacks and reason for the discomfort with why the web is bootstrap-lacking is that even though The Web was first made public until 1991, The Extensible Web only began in 2013. So there's this 20 year difference between how long we've been able to make web pages and how long we've made bootstrapping even remotely possible on the web. Thus, realistically the "modern" web is only ~5 years old. And if you look at just how much the web has changed only in those past 5 years it gives me a lot of hope for what we as a community will be able to do in the next 20 years now that everyone's on board :D

Collapse
booligoosh profile image
Ethan • Edited on

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:

* {
    default-styles: none;
}

NOTE: Obviously keeping some default styling such as hiding <script> tags ;) ;)

2: Better ways to handle !important

You 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 like z-index, so you could give it a number - eg. !important(1) or !important(5).

What do you think about those ideas? I'd be interested to know.

Collapse
thesdev profile image
Samir Saeedi

About #1, do you know about * { all : unset; }? MDN Link

Collapse
booligoosh profile image
Ethan

No I did not!!! Thanks for letting me know about that 😁

Collapse
doubleedesign profile image
Leesa Ward

If you need !important that much, something is probably wrong and you need to refactor your CSS.

Collapse
booligoosh profile image
Ethan

I don't use !important much, but having specific control over importance would make CSS more flexible

Collapse
coolgoose profile image
Alexandru Bucur

Considering the 'recent' grid and flexbox I think we're in a decent spot regarding CSS. I still do hate specificity in some cases (and !important can burn) but we're in a really great spot now compared with IE6 when I started developing.

Starting from fresh I only have three things on my list:

  1. Some sort of 'namespacing' so you can do 'BEM' on the html classes without beeing 'mycomponents__looks--like-candy'
  2. Any kind of nesting like SASS or your favourite pre-processor.
  3. Better handling of z-index and overflow
Collapse
stevensonmt profile image
stevensonmt

While I enjoy flexbox and especially grid, but I recently started using Elm and find the approach taken by the style-elements package very insightful. Layout and positioning is not really "style" it's architecture. Separating layout and style into different tools makes a lot of sense to me.

Collapse
tipoqueno profile image
Eugenio Monforte

"CSS has a lot of issues." Which ones?

I feel that a lot of developers didn't learn CSS properly.

Collapse
setagana profile image
setagana

To me (as someone who naturally gravitates more towards the back-end of the stack) my biggest annoyance with CSS is that I find it all to be magic words. Nothing has a predictable effect, because how a property influences an element depends on what kind of element it is, what kind of elements it is a child of, what properties those parents have, etc etc etc. So when I set out to achieve a specific goal, it feels like I'm just trying random combinations of magic words on the element, its parents, its children and every other thing in the DOM until I find the "spell" that does what I want.

Collapse
napoleon039 profile image
Nihar Raote

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.

Collapse
onecuteliz profile image
Elizabeth Jenerson

Same here.

Collapse
justynclark profile image
Justyn Clark • Edited on

CSS Grid, FlexBox, Sass 💥

Collapse
ghost profile image
Ghost • Edited on

I'm not a big Doctor Who fan but the TARDIS seems like it would be the best way to go, find the exact moment IE6 was conceived and just bloop it out of existence.

There would have been less need to cascade failure.

Other than that, ++Sass

Collapse
nateous profile image
Nate

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.

Collapse
itsjzt profile image
Saurabh Sharma

For me, I think inline styles can be a little more powerful.

Collapse
justynclark profile image
Justyn Clark

Never inline styles!

Collapse
itsjzt profile image
Saurabh Sharma

if you are writing a typical website then sure another file for CSS makes sense, but for web apps where each component will be independent then Inline styles are good too.

Thread Thread
justynclark profile image
Justyn Clark

True. Like React ;)

Collapse
booligoosh profile image
Ethan

I think now my only use for inline styles is styling stuff through JavaScript, which goes to the inline style

Collapse
theodesp profile image
Theofanis Despoudis • Edited on

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.

Collapse
booligoosh profile image
Ethan

😕 Where's the fun in that? 😂😂
Personally I find CSS quite fun to use.

Collapse
tomhodgins profile image
Tommy Hodgins

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...

Collapse
vladinator profile image
Vlady Veselinov

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.

Collapse
crongm profile image
Carlos Garcia ★

Parent selectors, definitely.

Collapse
doubleedesign profile image
Leesa Ward

100%!

Collapse
31547 profile image
31547

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

Collapse
franzliedke profile image
Franz Liedke

I feel like there should be a constraint: any replacement has to have the same feature set, including things like the ability to define user-agent stylesheets to overwrite the styling on any page.

This, sadly, gets lost with many of the modern approaches I see...

Collapse
scottishross profile image
Ross Henderson

Probably one of the worst and best things with CSS is !important. It shouldn't be needed, but I'm glad it does sometimes.

Collapse
lexlohr profile image
Alex Lohr

I like most of it, the cascade, the powerful selectors, the attributes. I would make only one change Instead of !important, I would have created pseudo selectors to increase or decrease specificy :+id.class.tag and :-id.class.tag, where id, class and tag are optional representations of the amount of increase and decrease. I also would have made the specificy of inline styles that of an id selector, so that it could be easily overwritten with :+1.0.1

Collapse
revelmind profile image
Zack

Make multiple properties have the same value:

h1 {
    margin-top, margin-bottom: 10px;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
le_newtype profile image
Nicholas ―M―

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:

  1. 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

  2. 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

  3. 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

Collapse
titonobre profile image
Tito

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:

  • Style leaks: there are several approaches to solve this but what we need is a native way.
  • User Agent stylesheets: 🔥🔥🔥
Collapse
darryldexter profile image
Darryl D.

It wouldn't be a separate language. Bake it into js.

Also selectors being global by default is a flaw.

Collapse
stevensonmt profile image
stevensonmt

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.

Collapse
darryldexter profile image
Darryl D.

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.

Collapse
hugo__df profile image
Hugo Di Francesco

Just the way it does 😁
CSS is resilient and works

Collapse
sam_ferree profile image
Sam Ferree

The way Sass currently works.

Collapse
georgeoffley profile image
George Offley

I would kill it with fire.

Collapse
wesnetmo profile image
Wes

properties would be final.

once you assigned e.g. color:red, you are not allowed to override it in more specific selectors

Collapse
davertron profile image
davertron

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.

Collapse
chitchu profile image
Vicente Jr Yuchitcho

I'd like to fix style collisions in general. Probably get ret rid of global scopes and maybe an overhaul of specificity rules.