What they got WRONG with CSS

[@jenstornell]

I have a solution for this. To set a CSS version number i the html header. If it's the version 2 or whatever, make border-box default and include z-order instead of z-index etc.

[@FlorianWendelborn]

Yeah, or just something similar to JavaScript’s `'use strict'` magic string In general, it would be great if there was a mechanism for supporting multiple different versions of JS/CSS built-into the language(s). Also, it feels like a mistake that everything lives on `window` instead of being something you `import`. It’s very easy to accidentally use a globally defined variable since there's so damn many with very common keywords.

[@happyjohn1656]

Nostalgic of going down the Python 2 vs 3 rabbit hole... 2:37 AM (yep!) 3/19/2022

[@JamesWelbes]

Font family? font-family Font size? font-size Font weight? font-weight Font color? FONT-COLOR OBVIOUSLY

[@FlorianWendelborn]

I’m doing CSS since around 15 years now and I still sometimes mess that one up lol

[@Orderable]

@@FlorianWendelborn Right? font-color...d'oh nope that's not it. text-color....d'oh nope that's not it either.

[@gabiold]

My biggest problem with Z-index is that it is an absolute numeric value where you have to keep track of depth by yourself throughout your whole page, possibly PWA, keep gaps in numbering like in the old BASIC days, and it doesn't play very well with other's work (libraries/modules). It would be better if we could define relative ordering, like below this, or above that, named layers, something like these.

[@xXYourShadowDaniXx]

For real, named layers similar to the grid template naming would be amazing like: :root{layer-template:"front back"} //first is top layer, last is bottom layer .front{layer:"front"} .back{layer:"back"}

[@AndreasDelleske]

Why not use real units like mm, pt, em, whatever because after all, it's just one more dimension in reality. We could look at a website sideways if we wanted to, to see the stacking.

[@gabiold]

@@AndreasDelleske It wouldn't make too much sense, as it is not actually a third dimension, just an ordering.

[@AndreasDelleske]

@@gabiold A thing can be both in different contexts. Our real space has a property delivers the ordering exactly as you describe it. And as i said, if we want to move into 3D (which is already possible today!) we'd already have a defined scale. If we just do the "ordering" thing, that scale would have to be "undefined". Now how would we have to display an object with "undefined" z scale?

[@gabiold]

@@AndreasDelleske Todays webpages which uses CSS and HTML are 2D. Everything is 2D, none of the elements have any third dimensional manifestation nor behaviour. It is not neessary to complicate things now if we are such far away from having a 3D web. (I repeat again, in native HTML/CSS). The amount of things need to be added for 3D operation is so huge that it wouldn't make sense to abuse the currently existing properties, it is way easier to define a new set of elements and properties for 3D operation when needed. Exactly that makes CSS complicated that there is a ton of legacy abused stuff, and you can, for example, center an element in 10 different ways out of which some guaranteed to not work in mobile Safari for example. You get the idea. The purpose of Z-index to define which element should be drawn on top of another element, eg. a dialog box above the main content. That's roughly 99.99% of use cases, which doesn't need nor have any use of a measurement unit, but indeed would have a huge benefit having some sort of relative or named ordering. If you want to do a parallax effect, you have to use something else, not having UoM on Z-index is the least of the issue. Third: if we really need a full featured third dimension, just call it Z, as we call the others X and Y. Juat another reason to not abuse z-index. It's an index, its in it's name...

[@pokefreak2112]

would be nice if they added a "sane mode" to CSS that fixes these problems similar to how we now use doctype html

[@gilsinhonunes]

Hell yes. And to be even more future proof, also add some versioning to be able to keep updating after some time.

[@gabiold]

And also a strict mode, ie. a wrongly written sheet, which is in any way incorrect for that version, should break, swear loudly on client's speakers, etc. I imagine something similar which is in C++ compilers. You compile against a version, but when your code is wrong for that, then it does not compile or give you warnings. Linters do this these days though, but would be nice to have some sane linter in a browser. Not running constantly, but when a dev. (or anyone) opens the console, it should automatically list all the issues found in all the loaded CSS or whatever files, even if it is not affecting the rendering yet (possibly because the rule isn't used in the current view, but potentially might be in some dark, cold, hidden place on the webpage). This could help spot some rare errors. And possibly misunderstandings, because let's us honest, khm, there is always something in the CSS we use but don't fully understand how should it work. 😉

[@sandorberkecz]

I understand that they can't change already existing rules as they would break old websites. But why can't they add new rules to fix the mistakes? For example they fixed the "rgba() should not exists" problem by providing rgb() an optional 4th parameter. I feel like some of the problems could be fixed this way, like the currentColor / current-color one. They could introduce the new rule, but for compatibility reasons also keep the camelCase version. Same goes for nowrap / no-wrap. This can also be applied for property names like border-radius / corner-radius.

[@cmyk8964]

I think `rgba()` should be overloaded to be called with 2 parameters, like `rgba(#20C098, 0.6)`. Or even `rgba(rgba(0, 0, 0, 0.6), 1)`!

[@amirhosseinahmadi3706]

One thing I've always wondered is why don't they versionize CSS like many other kinds of software (e.g. React) and require developers to specify which version their CSS is using? What this does is it allows new CSS iterations to include breaking changes (such as changing the default value of "box-sizing", say) without having to worry about current users, as current sites that are operating on the older version would continue to work, and new sites could simply update their CSS version to take advantage of the new stuff. Great video, by the way, Kevin.

[@SebastianZartner]

There were long discussions in the past about that. I think the main reason against versioning CSS is that this means bloating browsers over time as they would have to support all versions in order to avoid breaking existing pages. Also, since CSS 2 its features got split into different specifications (called modules) progressing at different speeds and having different levels. And browsers don't implement new features all at the same time. This basically makes it impossible to versionize CSS.

[@amirhosseinahmadi3706]

​@@SebastianZartner Oh okay, good to know, this makes some sense, thank you, Sebastian. Do you also happen to have the links to some of those discussions that took place around this issue?

[@Skyten10]

Seems to me that you could retitled this video. Something like: Dealing with css's design flaws. Cause you gave me a starting template for every css I write moving forward. THANK YOU!

[@GloriaHoliday]

You are a gift from the universe…thank you for teaching me! 🌺

[@dharmikhingu1046]

Thank you IE for box-sizing: border-box 😊

[@FlorianWendelborn]

The initial version of CSS Grid also came from IE

[@lugas4270]

Align-items and justify-content should change to align-x and align-y, and won't change the axis despite the flex-direction

[@ACharlar22]

Love this comment

[@cmyk8964]

That’s a bad choice. Aligning along the flex direction is important for localizing for RTL or vertical scripts. If they are to be renamed, they should be `align-across` and `align-along` relative to flex direction..

[@lugas4270]

@@cmyk8964 well sometimes it doesn't work well in a non english speaker, tought that x and y is more easily recognizable because cartesian is more universal and widely use? Imo

[@cmyk8964]

@@lugas4270 Ugh. As I said, it’s not universal that people read text from left to right and lines of them from up to down. Enforcing content alignment with no regard to flex-direction is a horrible idea that throws into the trash why flex-direction uses keywords like row and column instead of x or y.

[@krissyville]

I'm so, so happy we're no longer in the Geocities/Angelfire animated background days. I know you popped up the wayback generator on stream a few days ago, but I still cringe at the thought! Mistakes aside, we've really come a long way and I'm excited to see what the future holds. I'm still having to run a modernizr on some sites (depending on client) because there are still oddly people using IE6/7. It's so frustrating to keep dated technologies in mind!

[@gabiold]

Flexbox's biggest annoyance is that you have to think in a rotated coordinate system, flow axis, cross axis, and the related weird alignment properties... Why don't we just have vertical-align: {top|center|bottom|...}, horizontal-align: {left|center|right|justify|...}, that would cover 99.9% of the real-world use cases.

[@yammye]

instead of justify-contents and align-items, it could be like align-main and align-cross. So if the direction gets changed, the aligns could follow.

[@kvncnls]

I think the "z-index" makes sense. If we're thinking about things in 3D, we have the X, Y and Z axes. X is horizontal. Y is vertical. Z is depth.

[@magnusanderson6681]

But does "x-index" make sense? Or "y-index"?

[@himabimdimwim]

@@magnusanderson6681 Yes, yes it does.

[@DaVince21]

@@himabimdimwim Then what does it mean? Would x-index: 1 mean "one undefined unit to the right"? Or would it make an element position to the right of anything with a lower index?

[@DaVince21]

Some languages have a "strict mode" to deal with unsafe or old constructs (see JavaScript). Some languages also make a hard distinction between the old and the new and what defaults there are for it (see Python). I think it would be really helpful for CSS to add something like a version or strict mode comment at the top of a file (or as a meta tag) that tell the browser to use more modern defaults.

[@ithinkimhipster502]

If calling it !important is a mistake, then grid-row /grid-column positioning or numerical arguments for pseudo classes not having zero-based indexing is a mistake.

[@DaVince21]

I can never get used to those slashes!

[@jugibur2117]

Comming from SASS and sometimes using pure CSS, I often missing a quick way to comment out a line, i.e. with two slashes at line start.

[@jfftck]

There is an easy fix, just create an @using-defaults(box-level: 4) rule that works like media queries and maybe an @defaults as the first rule that would take a named parameter. The reasoning for the @using-defaults() is to allow sections of the CSS to be set to an older set of defaults for legacy CSS that would take a long time to convert to a newer standard, that allows progressive upgrades to the CSS without breaking the whole page that it is styling.

[@DarkxPunk]

I was just about to make this comment but, frankly, we have a system that works for other languages and standards, declarations at the start of the file. If you set that deceleration modern browsers will assume new defaults that fix a lot of these issues while old browsers will simply ignore it, then like we have to do anyway we just code little hacks for old browsers into our css if we care.

[@fave1201]

It's great being in a position like Kevin's where the only thing that's remaining in CSS is bug fixes but interesting that devs who will learn CSS 5 years from now will create some awesome stuff and wonder how we managed to do anything...

[@danielsummers1973]

TIL that rgb() has an optional alpha parameter.

[@enriquesneffels3053]

@KevinPowell, please, when your CSS Demystified course and the SASS will be available again? I need to purchase them at least by the end of this month. Why they become unavailable and the others don't? it doesn't make sense to me. Sorry, I'm not mad at you, lol. I know I can input my email to be notified and all that jazz, but really, wtf? Will they be on scrimba as well? I don't understand why they become unavailable FOR SO LONG!?

[@ubergnu]

"align" and properties with that word in them could possibly do fine with a makeover. Does it affect the element you set it in? The parent? The parents content? Yeah, you'll learn it after a while, but it can get confusing.

[@peterholzer4481]

I disagree on two points: 1. Margin-collapse: I think this makes a lot of sense if you are laying out text (and is still quite useful if you're laying out other stuff). While I don't care much on whether it's default, I am very happy that it's available 2. Sanity of table layout: While I have sometimes cursed at some weird edge cases, the HTML/CSS table layout algorithm does a remarkably good job laying out tables with arbitrary content. Certainly better than LaTeX or anything else I knew in the mid-1990's. I think the Netscape engineers did a great job, especially considering their time constraints. CSS then of course had to be compatible with this.

[@SebastianZartner]

The issue with margin collapsing is not the collapsing between the (sibling) elements but the top and bottom margin collapsing with the one from the container element. Also, collapsing only happens in vertical direction but not in horizontal direction. Luckily, in the CSS Box 4 specification there is now a `margin-trim` property that gives authors control over this behavior.

[@user-ms13w]

Kevin thank from lesson`s , I have greatly improved my knowledge to front - end 🎓

[@jonmayer]

The box-sixing default one drove me crazy recently.

[@bart2019]

What I consider a huge mistake that isn't on the list is the use of a single keyword "display" for 2 incompatible things: "block" and "inline" refer to the outside behaviour, while "flex" refers to the inside. One is like "margin", the other like "padding". This should have been different keywords.

[@KevinPowell]

Display actually accepts 2 values now (or it does in some browsers, and is part of the spec now). One for the outer value, and one for the inner, so 'display: inline flex' or whatever, because they've sort of realized it, but too late to do anything about it.

[@Damien5]

Do you have any tips for someone who wants to gain experience with web development and is just getting started?

[@_ric]

What they got wrong and it's only 11:35 long? I reckon it could be a video 3 times that length! My personal annoyance is "content:", I understand why it's there, and even to an extent understand there may be benefits in certain circumstances, but the idea of actual page content being defined in the CSS is fundamentally wrong. To me, the distinction between framework, design and content should be sacrosanct. In the same way I should not be checking JavaScript files for content. It's crossing the streams, to coin a well known movie phrase, and I really don't like that.

[@toma1610]

02:39 Confusion because Bootstrap define its class like nowrap without hyphen.

[@heathbruce9928]

How about that list-style vs marker-style? I don't like how css has a tendency to name things in a completely different way for child objects rather than from their parent type. So I would think it would be more like list-marker-style which to me is much more readable and helps one understand the relationship of the call. Or font-size vs text-size. Font-shadow vs text-shadow. What is the relationship between font and text? Why do we bounce back and forth from this type of organizational structure? Who designed this? Microsoft? Lol

[@wallacesantos0]

Is there a chance to HTML 6 come and solve all these problems and some more without the need to worry about legacy websites?

[@christianeherzog298]

i am annoyed by the attribute color. all other font properties start with font-...

[@nro337]

Great one!

[@Grafii2198]

I always wondered why won't they make something like CCS 2 where it would be rebuild with new defaults and new stuff for modern web pages. That way it wouldn't break old pages which use CSS1 as it wouldn't change at all. And if you think of it currently we are working with 90s stuff that is trying to provide things for current days but still is technology for 90s.

[@Grafii2198]

Hmm, I was thinking about it more and I wondered what if they removed specificity completely and made something like "style-importance" which would define how important are the styles in this one selection. I think it would give more freedom and for sure would be a lot easier to learn

[@vishwamperiasamysubramania131]

I love your videos, they are very well explained

[@bobdinitto]

I'm fairly new to HTML 5 having previously used HTML 4. One thing I've noticed about building HTML 5 front ends is that some of the CSS properties for fitting and aligning things seem to conflict with one another. And also many are linked to each other such that their behaviors interact in tangential ways that seem to resemble quantum entanglement. These two factors often lead to confusing combinatorial effects that wouldn't be possible if there weren't so many different options for essentially doing the same thing, only differently. Prior to this I played around with QML and discovered it's much easier to understand what's happening because everything is a rectangle and they all act exactly the same and have the same set of properties. I'm planning to research Flutter next to see if it's any better. The backward compatibility curse leads to a degradation of APIs over time.

[@nitras.design]

Text-decoration, font-weight, etc... In essence, it's all just text based properties, so why not name it like that.

[@ep302]

Do we need to add width/height: 100% on the parent elements for the child 100% to work? I didn't know that!

[@whyredvince]

Yes Kevin has a video on this! kzbin.info/www/bejne/Y6TXYmeiirZ3abc

[@deanolium]

Not entirely. Any element using a percentage height needs to have an ancestor element which defines the height. This can either be the body tag using 100% (which will then force it to use all the space) or an element putting in a concrete height (ie, 800px say). Without this, CSS just treats the value as 'auto' which means it'll act as if you didn't give it a height. Width doesn't require this, using the full width of the browser if no parent element defines a width. It's a weird nuance that is easy to forget. Note also that vh works differently to percentages for height!

[@AlThePal78]

Why people use hsl I just heard of that?

[@MMH94MMH]

Thank u very much for this tutorial, can u please make a video about PurgeCss ?

[@KevinPowell]

I really should :D

[@Franky_PT]

Someone should do a CSS compiler like SCSS or Less with these tweaks... It would make life easier

[@VeitLehmann]

There's PostCSS 😉

[@schmellmafeet]

Why not be able to explicitly define the version of css you are using then they can fix old problems as new versions released?

[@zachjensz]

It's not a bug, it's a feature.

[@mahadevovnl]

CSS should've been nested from the get-go. They should add it ASAP. And the syntax for CSS variables is abysmal. And that's coming from a vanilla CSS lover :)

[@Z3ROR]

For years i want counterparts for >, + and ~ selectors. I hope they will come some day.

[@igorswies5913]

I don't think CSS works backwards. That might slow things down when you go back to old nodes and apply rules to them again

[@VeitLehmann]

Check `:has()`, you can build all those counterparts with it.

[@KayOScode]

Well, nothing could be worse than the string null terminator mistake

[@deatho0ne587]

I think the last one should be Important, should not have ever existed at all. I have thought about this for years.

[@exjwphilosophy]

It's just a pet peeve but I hate that font color is just called "color".

[@breakablec]

They can add a meta tag and deprecate all those things

[@BlhJ400]

Yeh like before watching 👍👍

[@ziadamer7621]

awesome video

[@LeeSmith-cf1vo]

Imo `!Important` never should have existed at all. The entire specificity thing still has me getting confused even after many many years

[@KevinPowell]

just wait till you start using it with the new Cascade Layers where it's sort of flipped around a little 😅

[@isaacbaptista6207]

Why shouldn't table layouts be used?

[@happyjohn1656]

The last one is pretty funny 2:36 AM (yep!) 3/19/2022

[@KatrinaYancey780]

The height one!!!! It always gets me 😠

[@sinom]

"it's not hard to fix the problem" If it's possible to fix it then yes, but sometimes it's impossible to fix without JS or hardcoding magic numbers

[@kamertonaudiophileplayer847]

Forgiving? I disagree, it will be a hard to find errors, because something works, something doesn't work, but why?

[@babakfp]

They can ask people's opinions instead of doing everything by themselves

[@Z3ROR]

They could fix these things in a possible CSS4.

[@zibadian467]

"background-color" is a color keyword with a hyphen.

[@aichpvee]

They messed up a lot less with CSS than the JavaScript DOM API. That shit was designed for bad code.

[@Iam_inevitabIe]

It was perfectly clear this time"front end friends"

[@milasudril]

colors should have used linear color-space

[@lapridagaspar]

border-radius should've been called corner-radius

[@gabiold]

Meh... While it would be linguistically more correct, all the other border-related parameters begin with border-... so it would be somewhat odd/unnatural.

[@lapridagaspar]

@@gabioldonly it is not border related... You can have a corner radius even with no border.

[@gabiold]

@@lapridagaspar Ahh, you are totally right! I so frequently used to it just for rounded borders I didn't thought about the shape of the client rectangle, background fill, clip rect and everything, which also depends on it.

[@JimKernix]

Why shouldn't tables be used? What would be a better way to show tabular data? Rows with columns so that you can see a logical representation of what you want to portray? I use tables on my pet services site where I show all the companies that have websites and are based in Philadelphia, PA. I compare their rates for different services. Then I have tables on my Guitar chords website where I have tables by scale degree for different scales and all the chords that can be built on each note. Why is that a bad idea?

[@ralphstube]

Hi Jim - I looked at your site - which is working well using Wordpress responsive tables. Under the hood this slows down a site and restricts the design. Looking at the infor you're presenting the Mobile version is easier to follow as the full screen doesn't show empty data cells as well. However, the mobile table makes the page much longer. Normally this would be controlled with Javascript to make it more responsive and dynamic - but again, this holds a performance trade off. Pure HTML and CSS can run faster, costs less bandwidth and has fewer design restrictions.

[@JimKernix]

@@ralphstube I'm not using JS for any of that so I do not see how it is slowing my site. And I can't even tell you how long it took me to find a solution for responsive tables. The CSS is not the best but I did that years ago. There are times when mobile sucks and desktop rules, like learning how to build chords from scales with a visual table. I'm assuming that is the site you looked at. However, the empty cells are important for learning which scale degrees are part of a chord or are NOT part of a chord. Regardless, tables are good. Epecially if you are an analyst or data scientist. There is what looks good, and then there is what is practical from a business or learning perspective.

[@HenryLoenwind]

What was said: "Stop using tables for layouting your page, we now have this new thing 'CSS' for that" What people heard: "Stop using tables for anything" What I see: People writing complex CSS frameworks to layout their pages in a table-like style.

[@JimKernix]

@@HenryLoenwind No way! Not when tables are better for analytical information, but you need an analytical mind to understand that. Do whatever you want, so will I. And what is this "CSS" thing you speak of? I've never heard of it. Why did you feel the need to be insulting?

[@default_user_exe]

color should be font-color

[@thevividversatilechannel4807]

My suggestion: tables should have had `border-collapse: collapse` by default.

[@coolworx]

The one thing that really annoys me about CSS, and has since its inception, is the damn kebab-case! Why not camelCase so as to work more smoothly with javascript? Even underscores would have been better .

[@thebestspork]

What they got wrong with CSS: all of it

[@AlThePal78]

seagreen

[@derechtepilz]

Fun Fact: They made this site by using their "wrong" CSS

[@wolverine9632]

As a C programmer, I have actually never seen "!important" as "not important".

[@sharkinahat]

Thanks IE '-_-

[@codetech5598]

They got virtually everything wrong.

[@gavinjones]

DFTBA

[@brendan1427]

whats wrong with css? open windows explorer to find out! 😅

[@whyredvince]

Table layout should be sane 💀

[@skellious]

just fix them in CSS4 xD

[@modolief]

Hm. Bad design in a framework that's all about design. So meta.

[@NicholasAlexander1]

"Should have been..." when it isn't is interesting but ....

[@NicholasAlexander1]

!important could have !override; as that is what it does. or better... !deprecate; !

[@adud6764]

Can someone explain why this can't be changed? Yes, it will break website, but with warnings and a decent migration period this should be possible. It will be trouble, but it seems worth it. If your website relies on some dumb interaction mentioned here and you can't fix it within 6 months, sorry, but screw you.

[@KevinPowell]

Because what about the 20 years of websites that are out there now? There are billions of sites, many which aren't being maintained anymore. We can't just have most of the internet break just to save 10-30 lines of CSS in a reset which fixes it all. The best solution I've seen offered is for something like a for CSS, which says "we're using version X of CSS", which has different defaults. That, I could get behind if it made any progress, but I don't see it happening really.

[@SebastianZartner]

As Kevin wrote, breaking websites is a no-go on the internet. Also, browser vendors don't implement things all at the same time, so changing CSS features would mean that things work in one browser but are broken in others.

[@arifdevcoding]

here you go, you deserve a dislike for the title.

[@wiepcorbier]

Stop saying "You Know". Irritating.

[@kopysoleh]

Css is a useful for modern world, but it'll be useless if we (Ukrainians) don't stop putin's aggression. Today Kyiv and Kharkiv, tomorrow Warsaw and London. Plz, don't forget that unpleasant thought