CSS Architectures Roundtable

Having heard from three of our industry’s leading front end developers, let’s dive deeper into the current and future state of CSS architectures. This is a chance to ask probing questions, and to help get to the heart of one of the front end’s most pressing challenges: how do we work with style in today’s complex web creations?

(upbeat electronic music) – Alright so I’m gonna start with a question. Just a couple of questions, general to come out of this. But I’m gonna start by saying, if you can fix one thing in CSS, like there’s a thing, I just wanna fix this, I want a way to make it work differently.

Wave you magic wand, what could you fix? Who wants to go first? – [Mandy] You go first. – [Mark] Oh.

That’s a hard one. – [John] Only one.

– I might feel like I’ll regret my answer later because there’s so many things but (laughs) I think Lea Verou mentioned it the other night there’s no way to lower specificity.

And particularly, a good example of where this bites us is like CSS Resets and things like that where you kind of wanna be able to say like I wanna specifically reset this thing but if someone else defines it, I don’t really care. There’s no way to do that. And it’s really painful.

– [John] Alright, yeah.

How about you Mandy? What you would you… – [Mandy] I’m gonna be

totally superfluous, not superfluous, dumb. (laughs) I would love, love, love, love, for there to be more than two pseudo-elements because I use them all the time and it annoys me that I’ve only got two and I have to add a span in to get an extra two.

I know that’s not big picture or anything.

Yours was like so much better.

(laughter) But I just think that would be so useful and all my text effects would look way more awesome and I could make more custom emojis and the world would be a good place. – [John] Alright. Are you listening CSS Working Group? (laughter) More pseudo-elements! – [Glenn] Yeah, there’s a spec for that I think. – [Mark] Yeah.

– Wait, if you could add a pseudo element to a pseudo element, right? – Well, obviously, yeah.

– Yeah, but, before, before. Like, element, before, before

we do a theme, right? – That might be going too far. I don’t know. (laughter) – Alright.

– Do all of Facebook in one div.

(laughter) – How about you, Glenn? – I am going to say, the one thing that I lament the most is that the browser support doesn’t move as fast as the CSS working group does. Even though they don’t move all that fast when something like CSS Grid comes out and everything I hear about and everything I see, done with it, I just think looks fantastic. And then I look at the browser support that I would need to ship to the customer’s and I’m like, okay, well, maybe later, and …

– I did the same thing.

– Yeah.

– CSS variables, another good example where CSS variables just can’t be polyfill because they’re just so powerful, and the CSS world, post CSS variables, could be hugely different, and so to be able to do that now would be the thing I’d like to do.

– [John] So, I have a solution to that, what we do is we get the CSS working to where it can work in secrets on features and then the browsers implement them all in secret and then one day, like in WWDC, they go ha ha, and we go wow, it’s amazing! It’s just I’ve been working on it the last eight years and we didn’t know about it. (laughter) And along the way they say no, no, that’s actually not what we wanted at all.

– If I can jump in, I actually thought of my real answer. (laughter) I’ll keep it short. Element queries containing queries, because responsive design effectively breaks. – Yeah – The component model as it’s implemented now, so – I agree, that comes up for me all the time. It’s really annoying.

– [John] Yes, laundry list going it up w three c, so, what surprises me is, I thought at least one if not all of you would say this, because it seems to come up all of the time, is scoping, right? It seems to me, one of those things where it’s been, or all of the strategies are all really about the fact that, and you’ve articulated this quite a bit yourself, Mark, is global scope, right? It’s this thing we can’t turn off, it’s like we inherit into cascade, all of that kind of stuff, right? I just wonder if you ever have thoughts around, I just wish, you know, in fact a lot about component strategies, are insisting like, just take that right away. And then it’s really about managing scope, right? – It is, I mean, I’m, you all jump in if you want, But I think that that’s something that CSS, that’s one of the things we can solve with tooling.

We can come up with a methodology that takes that problem and makes it less of a problem.

It takes CSS modules and becomes almost none of the problem, using components stuff with like reactive and be all automatic, like, that flaw is inherent in the system, but those are the things we can build tools to fix. – [John] We sort of ideally don’t wanna have to build tools, there’s a lot of complexity where it, so it, I guess that’s my point around it, see if we can somehow fix that, it’s some way of sort of scoping to an element. In, you know, in the dorm so that we do not have that. that would solve a lot of the, we built a lot of complexity for managing global scope really.

– I’m in two minds about that because I think that good global scope and all of that is really useful in CSS and I think the reason that we have so much difficulty is because we’re people and we’re not good at that stuff. It’s like a people problem so I’m more comfortable with that kind of thing being solved by tooling than by CSS itself.

But I don’t know, cause it is hard and it does suck but I don’t know, is that really CSSs problem, that we suck? I don’t know.

(laughs) – Well like you know like you-, – I don’t know.

– I sometimes wonder with some of these solutions we call it CSS but they’re not really using cascade so they’re SS and they’re not actually sheets they’re just the S, right? – S.

– Alright I have one more question before we break, in this produce but this could have gone for a long time, where has my question gone? I think this is kind of a, this is a human question right.

And it’s something to which you’ve addressed a little bit, specifically, Glenn.

Is, like most of us, now this is true of all of us on this stage and I think most of us in the room, we started, we kind of wandered into the web and certainly anybody that has been doing this more than about 10 years, probably did a bit of HTML here and a little bit of CSS and they wandered and maybe at that point started using some J Query or whatever whereas now, to get in, like it’s you know, to get in, what are we expecting of people to be junior developers now, compared to? And so the question sort of is, is there really ultimately a place anymore for someone who says like, I do HTML and CSS? Is there a place for that person anymore? You know like Mandy you’re hiring, what’s a focus, so you sort of see this in even more a traditional kind of technology stack, is there really a place for that anymore? – We’re not really a traditional technology stack anymore, I mean, I write so much Java Script, it kind of makes me a little bit sad cause I love CSS.

But I think there is but I just think it depends on where you work.

Like I know people who pretty much only write CSS and HTML and that works totally fine for them and the businesses that they work for.

But if you’re working-, – The question is sort of is that going away? – I don’t, I don’t know, I think you can specialise. – Let’s ask the room.

Actually, I’m gonna like maybe ask the room, like who hires people to just be great at CSS and HTML right now? (laughs) For the viewers at home, not a single hand went up I think it’s a really interesting-, – Is that right though? Should we be expecting everyone to know everything when they’re-, – Well they are.

(laughs) If you want to work for these people you do. – I don’t know if that’s fair like it’s so much stuff that people have to learn these days, are we expecting people to know and understand and be amazing at too much stuff and is that why people burn out and hate themselves? – Yes.

(laughs) – I don’t know if, like if this is a, we might expect that from people but I’m not sure that that’s the right thing for us to do for our mental health and the mental health of the people that we care and know in the industry.

– Or even for any, to be quite honest, one of the reasons, and it’s great that we pay engineers a heap of money right? But at the same time that’s partly because we expect so much of them that there’s like here and then here and we want people up here so I don’t know this seems to me really problematic in a way I can’t necessarily articulate.

– I do think it’s going away.

– Sorry what’s going away? – The idea of using HTML and CSS and not anything else I think is going away but I think the problem isn’t that they’re going away because trends come and go languages come and go.

– Trends, HTML and CSS is a trend? – (laughs) No, no, no, I’m saying that trends come and go.

– You think they’re gonna come back.

– No, no, no, I, I’m, I think that as an industry we’re moving on, the problem is we’re not producing something that’s easy to learn as HTML and CSS.

– Except Marvo maybe.

– Yeah, except for the main Marvo which is an incredible, like you know approach.

The idea being we’ve been very willing to accept an increasing complexity because we all can kinda keep up with it but we have been-, – That’s why I run conferences, I can’t keep up. – Yeah that’s why we go to conferences, yeah. – Every year I get people to come tell me what I should know about it.

– But Glenn, I think like you touched on it in your talk, like I think making it as easy as possible for beginners, almost as easy as HTML and CSS is within reach, I think you believe that.

– I believe that totally, yeah.

– Because like as a thought experiment if you wanted to build, if we had the right tools that sort of cemented some of these practises I’ll pick react right? You could easily create a file that has a couple of stock components, just renders a thing and is that really any different than writing a HTML and CSS file? It’s almost the same thing.

– Yeah, take it the next step.

– And yeah.

– Except you’ve go three quite distinct languages and syntax and semantics in a single thing just to get started.

– That’s true regardless though, right, just instead of being in separate files, they’re in one file.

And I think you still, you HTML, CSS and Java Script have a learning curve regardless of sort of how you arrange them in the file system.

– But with that we are talking about going from, you know, we’re taking and making Java Script a necessary part of it now, as opposed to you know nice to have which was even five or six years ago certainly, like that was a nice thing, we sprinkled a bit on top of our core HTML, CSS right? That’s completely changed in the last three or four years.

– I think and the idea of taking Mark’s example a little bit further if you are writing that file and you are using Java Script syntax but you were using all of the code hinting that you get from visual studio code or Webstorm or something. Everything was being linted with immediate feedback there was no build stamp, it was just all transparent to you, everything was run and then you click a button and you generate the production version of that which generates these files.

I don’t think there’s anything inherent in Java Script that makes it more difficult to learn than HTML and CSS.

As long as you describe the APIs that match how people think about the problem so if you’re looking at a UI problem, you describe it as a hierarchical thing the fact that that’s JSS not HTML isn’t important.

Like eventually it’ll become important because when you want to wire up some data you can put it in squiggly brackets and then that’s data which we couldn’t have done with HTML without spelling like made of.

Yeah so those are the things and I think that Java Script is a better foundation but it’s too difficult to start to right now, but it doesn’t have to be.

– Well I guess, I guess that’s, to me it’s the open question, is there something inherently accessible about the declarative nature of HTML and CSS where I want this to look like this or to be this sort of thing, that’s different from procedural languages right? Which have loops and for and if and logic and all those things and I just wonder, I certainly, I wonder whether there is something inherently more challenging about that approach. – Do you know what I think makes it more challenging? I think because CSS and HTML have never really been considered real languages right? Whatever.

I think that people who write Java Script and other code and I’m super generalising but they’re really opinionated about how things should be and like you get this sort of sense that if you’re not doing exactly the way that somebody else has said then you’re doing it wrong. And that makes people afraid to learn and write and try things.

Whereas in CSS and HTML because you can kind of do your thing and it would like work and nobody not as many people cared about exactly what you were doing, it was a bit more of a comfort zone for you. Like you could experiment and play around and build your skills, without people like telling you you’re doing it wrong and making you feel like this big.

So I think maybe part of the problem that we have with things like Java Script and other languages is that we need to help and support and nurture people a little bit better. Because there can be this sort of I’m better than you, I know what I’m doing mentality in a lot of coding and I think that needs to go away.

Like we’re on the web, we’re supportive, we share ideas, we help people and I think that needs to sort of come back a lot more and make it more about trying and experimenting and lifting people up rather than crushing people down.

– Here, here.

(applause) (upbeat electronic music)

Join the conversation!

Your email address will not be published. Required fields are marked *

No comment yet.