As front-end builders, we’ve wished for lots of issues over time — methods to middle issues in CSS, encapsulate types, set a component’s side ratio, get finer-grained management over our colours, choose a component based mostly on its kids’s properties, handle layers of specificity, permit parts to answer the width of their dad and mom… the listing goes on and on.
And now that we received all we wished for and extra, a few of us are asking — will we now have an excessive amount of CSS?
The darkish occasions
In case you, like me, got here up in net growth throughout CSS’s infancy, the thought of getting an excessive amount of of it appears ludicrous.
Again within the days, just about the whole job description of a front-end developer consisted of coping with CSS’s limitations. The clearfix hack to clear floats, the 100% padding hack to make sq. divs, to not point out semi-randomly making use of unrelated properties to trick Web Explorer into doing all of your bidding.
On the time, the browser was a devious foe to be defeated via sheer crafty and arcane incantations. At present, the right property is ready and only a copy-paste away on MDN.
The brand new period of CSS
However at this time issues are vastly totally different: not solely are issues shifting a lot sooner, however browser distributors really care about making builders pleased! I do know, I couldn’t consider it both. However I run the yearly State of CSS developer survey (which is open now by the best way — go take it!) and I do know for a proven fact that browser growth groups use the survey outcomes (amongst many different knowledge factors) to tell their roadmap.
Past this, Google has additionally helped finance my work on the survey, and even employed Lea Verou to take the lead on choosing this 12 months’s survey questions.
It’s not simply Google. It’s grow to be modern to bash Safari and Apple basically (generally deservedly so), however you may’t deny how passionate somebody like Jen Simmons is about listening to builders and enhancing the online.
And never solely are browser distributors enhancing CSS on their very own; they’re even collaborating throughout battle strains with initiatives similar to Interop 2023 to assist cut back inconsistencies and incompatibilities between browsers.
An excessive amount of of factor?
The results of all that is that we are actually confronted with a humiliation of CSS riches, and it may be arduous to catch up. CSS Grid began being supported in main browsers virtually 5 years in the past, but I nonetheless test a reference each time I take advantage of it. And as cool as subgrid appears, I’ve but to even attempt it out.
Through the course of of choosing which CSS options to incorporate or not within the State of CSS, Lea and myself thought of many options, however we additionally rejected fairly a number of. Some examples of the function we didn’t embody are:
- The
linear()easing operate, which helps you to outline easing curves with extra granularity. - The
env()operate, which helps you to use variables outlined by the browser or machine. - The
scrollbar-widthproperty, which helps management a scrollbar’s look. - The
margin-trimproperty, which helps you to management how a container’s kids’s margins behave.
These are all probably very helpful, and would’ve all been large information throughout the CSS drought of previous years. However in at this time’s context they must battle for consideration with a lot bigger bulletins, just like the has() selector or CSS nesting!
Not excited
As Silvestar Bistrović writes, he’s “not that enthusiastic about all these new CSS options.” This discovered an echo on Twitter, with Sara Soueidan stating that what she cares about is “practicality, not how shiny a function seems to be in the mean time.”
This will likely look like a unfavorable angle, however I feel it’s comprehensible. No person could be anticipated to maintain up with so many new options!
One other unintended (or possibly, supposed?) consequence is that the extra complicated CSS turns into, the extra it raises the bar for any new firm desirous to develop a browser engine — to say nothing of the added workload in relation to sustaining and documenting all these new options.
CSS overreach
There’s additionally the very legitimate concern that CSS is likely to be branching out into areas it’s not fairly appropriate to deal with. That’s one other factor Sara Soueidan identified when reacting to the brand new CSS Toggles experimental implementation (right here’s a ticket discussing it):
Many have made the very affordable level that this type of conduct can be finest dealt with by a brand new HTML ingredient as an alternative of managing toggle state purely via CSS, and that CSS will not be the very best medium to make sure accessibility points are correctly addressed.
When CSS takes over one thing that was beforehand dealt with via JavaScript, that is typically seen as factor, because it usually reduces the quantity of code the browser has to load. So, I’m cautiously optimistic about CSS Toggles and belief that the CSS Working Group will correctly tackle the considerations of the neighborhood. However there might but come a day after we begin to fear that CSS could also be increasing past its borders and encroaching on HTML and JavaScript’s obligations.
New expectations
And possibly that is what wants to vary: possibly we must always drop the expectation that CSS builders must know all of CSS?
This expectation stems from the times the place CSS was an afterthought, that little annoying syntax you needed to be taught to make your button blue and daring similar to the shopper requested. However I feel we have to settle for that at this time’s CSS would possibly simply be approach too huge for a single particular person to grasp, particularly along with different front-end duties.
As Michelle Barker places it:
And that’s the place I, myself, land ultimately. I’ve made my peace with the truth that I’ll most likely by no means use — and even find out about — all potential CSS options. And that is coming from somebody who runs a survey about CSS!
However these new options will certainly be helpful to somebody. Somebody will write weblog posts about them, create cool CodePens with them, give talks about them. That particular person will likely be a cool, younger, energetic developer who nonetheless have all their hair. In different phrases, it received’t be me — and that’s positive.
And possibly you’re apprehensive that this new developer will likely be overwhelmed by all of the stuff they must be taught directly. However do have in mind all of the issues they received’t must find out about, exactly as a result of it’s been changed by these newer options. I do know I’d take that deal anytime.
However give it some thought: prior to now couple years, not solely have we seen an enormous improve within the variety of units we have to cater to, we’ve additionally began to acknowledge that all of us eat the online in barely totally different manners, whether or not attributable to disabilities, present context, or simply private preferences. Shouldn’t CSS adapt to this new actuality?
Now, I’ve to admit this has all made me really feel a bit nostalgic… so excuse me whereas I’m going clear a pair floats, only for previous time’s sake.
As I discussed, the yearly State of CSS survey is now open. Whether or not you suppose there’s an excessive amount of CSS or not, the survey is a good way to let browser builders know the way you’re feeling, so go fill it out you probably have 10 minutes.
