I not too long ago gave a CSS structure speak at Pixel Pioneers convention in my (kind of) dwelling metropolis of Bristol. I’ve spoken about CSS structure fairly a bit over time, however I really feel like there’s at all times lots to speak about, as issues are altering on a regular basis!
Though the speak shares a title with others I’ve given up to now yr or two, I’ve up to date it and added a few new sections protecting anchor positioning and the forthcoming masonry structure proposal. Should you attended the speak, you may discover the slides helpful, which embody hyperlinks to a few of the demos I confirmed.
View Fashionable CSS Structure is Superior! (2024 version) on Notist.
It’s typically onerous to know what kind of stage to pitch a chat like this, and I normally range it relying on the convention. Being immersed in CSS discussions on-line, and attending occasions like CSS Day, it’s simple to get into the mindset that everybody already is aware of these things. However, as demonstrated time and time once more, that’s not true in any respect! I usually meet builders who’re very removed from utilizing the flamboyant new CSS options bestowed upon us. They is likely to be restricted by their office to utilizing a selected framework, or prioritising different expertise (the monetary rewards for being a CSS skilled are famously low). Maybe they only don’t have the free time to spend tinkering with new CSS, or would (understandably) somewhat be doing one thing else.
Most individuals aren’t targeted on attempting to change into CSS specialists, however on realizing sufficient to do their job properly. And that’s okay! Miriam Suzanne and Max Böck have each written insightful takes on the seemingly lacklustre adoption of recent CSS options. I believe it’s completely wonderful that many builders are taking their time. It’s sufficient to know {that a} characteristic exists, and also you may be capable to use it whenever you want it, with out dashing to refactor your code. If what you already know works properly sufficient for you, then why change it? However it’s good to concentrate on new options, as they’re designed to make your like simpler. I completely agree with Miriam right here:
However should you’re nonetheless avoiding grid – no matter your causes – you might be, the truth is, lacking out. CSS grid is among the greatest options in CSS, and one of many greatest time-savers on each website we construct.
I believe the identical goes for min()
, max()
and clamp()
features: they make constructing fluid, responsive designs far simpler, however I’m at all times stunned by what number of builders aren’t conscious of them. That’s why I’m completely satisfied to go alongside to conferences and introduce builders to options which have been round for some time, however which they may not have had the possibility to change into accustomed to but. Most individuals come away pleasantly stunned by what they’ll do with CSS immediately, not to mention the CSS of the longer term.