Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-11-21 18:53:30

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,263
GitHub

stateofcss.com

2019.stateofcss.com

One of my winter projects (to help keep the brain demons at bay) is to relearn how websites are made. I could do it 20 years ago (raw HTML and CSS etc), and I was ‘OK’ ten years ago, then real life happened and I got behind on all the bits and pieces. I am not a designer, and this holds me back from actually trying to make something that looks good. Time to do something about that, I think.

I went looking for utility class CSS frameworks to pick apart. There are, unsurprisingly, heaps of blog posts from various developers, evangelists and advocates saying how amazing such-and-such framework is. Which is fine, but I’d like to know what general feelings are on a bunch of aspects before I invest too much time.

I’ve just found 2019.stateofcss.com and it looks like an annual survey with results posted for all to see. The visualisations are top notch and that’s what got me interested.

And so, I post it here with the hope that my fellow not-a-designer crew might find it of some use.

Last edited by gaekwad (2019-11-22 15:57:37)

Offline

#2 2019-11-21 20:29:57

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,912
Website

Re: stateofcss.com

Nice-looking site indeed.

I was never aware of exclusions before. Not that I remember, anyway. I like the sound of those.

Offline

#3 2019-11-22 14:35:10

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: stateofcss.com

If you want to learn more about CSS, I’d suggest you avoid Bootstrap and Foundation for a start – they are way too over-engineered and the CSS they produce is brittle and complex to decipher. I quite like PureCSS although I’ve never actually used it in production.

Exclusions are likely to be a way off – Edge is (right now) switching to the Blink engine so its support for exclusions will be gone – and none of the other major browsers support it yet.

Totally agree with the report about the lack of parent selector targeting – man, that would make life so much easier (although it would reverse the cascade, so I can see why it has not happened).

Offline

#4 2019-11-22 15:45:25

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,263
GitHub

Re: stateofcss.com

philwareham wrote #320200:

If you want to learn more about CSS, I’d suggest you avoid Bootstrap and Foundation for a start – they are way too over-engineered and the CSS they produce is brittle and complex to decipher. I quite like PureCSS although I’ve never actually used it in production.

Thanks, Phil – good to know. I’m looking at Tailwind and Tachyons at the moment. I got into Foundation some years ago and then watched it get mostly abandoned when Zurb restructured (?), I got burned on a couple of minor releases that needed a bunch of rewriting, so I stopped using it.

Offline

#5 2019-11-22 16:02:36

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: stateofcss.com

By the way, I love CSS – it’s great. It gets a lot of negativity from certain sections the backend-dev community, which is quite unfair and slightly childish (who cares if it is/isn’t a programming language – seriously?).

OK, occasionally you bump up against its limitations – but most perceived problems of CSS usually have a solution if you know it and write it well enough.

Offline

#6 2019-11-22 18:52:35

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,729
Website

Re: stateofcss.com

I still find it very hard to plaster HTML code with a ton of classes that are so atomic that they‘re like shorthand for inline CSS.

I‘ve said It before but I really like inuitcss which is based on Harry Robert‘s BEM-oriented ITCSS class naming convention – block__element—modifier. There‘s plenty of stuff on the net about that, e.g. here

It really helps in avoiding tangled CSS definitions and making modules of your page design movable to new contexts within your site without ripping them out of their cascade. And it feels like you’re naming classes based on their role / what they are.

To me it feels very Txp-like in that you use only what you need of it rather than one huge CSS file and you build your CSS yourself on top of basic patterns. There‘s no „opinionated“ look that you have to adapt away from. If you use Sass you can also build in some parity between your TXP forms and your sass blocks which can help in finding your way around your project as it gets bigger.

The other excellent reference for CSS good practice is cssguidelin.es (also from Harry Roberts)

EDIT: attempt to add link via mobile in a night-time overland coach finally successful. PS: phil, you‘re dark mode forum theme is great for such cases.


TXP Builders – finely-crafted code, design and txp

Offline

#7 2019-11-22 20:00:45

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,263
GitHub

Re: stateofcss.com

I’ve added Pure and Inuit to my list – thanks, Phil and jakob!

Offline

#8 2019-11-23 02:28:35

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,196
Website

Re: stateofcss.com

Destry wrote #320193:

I was never aware of exclusions before. Not that I remember, anyway. I like the sound of those.

That is mostly an abandoned module, I think. Only Microsoft ever implemented it in a release build, there was an early attempt by the WebKit people but it was never shipped in a release build IIRC.

It is a very unweb thing in a sense, as it only really works well in a more or less controlled viewport size. That and the need the for empty additional elements to generate the “holes”.

It is a bit of a pity as it could be interesting technology for PDF generation – where the “viewport” is more or less known and controlled. There are a few companies working in that field, but I don’t remember seeing them showing much interest.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#9 2019-11-24 11:08:51

etc
Developer
Registered: 2010-11-11
Posts: 5,194
Website GitHub

Re: stateofcss.com

jakob wrote #320207:

I still find it very hard to plaster HTML code with a ton of classes that are so atomic that they‘re like shorthand for inline CSS.

This, and even worse: most frameworks over-complicate HTML structure (tons of nested divs) to achieve a dispensable UX effect.

Offline

#10 2019-11-24 16:00:41

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,912
Website

Re: stateofcss.com

jakob wrote #320207:

I still find it very hard to plaster HTML code with a ton of classes

Ditto. I’ve always tried to avoid this. Not so much with frameworks, specifically, as I’ve never used any, but in general. Why use a class selector when other possible selectors might work without adding anything in the markup. That beat is missed a lot.

I’m not a big fan of Sass and whatnot either. I’ve never found a need. But then, I’ve never worked on a corporate website project either. Thank goodness.

phiw13 wrote #320214:

That is mostly an abandoned module

It struck me as something that could be used to, say, wrap text around a polygon (versus a block), which I think is a perfectly fine web thing to do. But maybe it’s not really for that?

Come to think of it, I thought I read something not long ago about defining polygonal shapes… tap, tap, tap . . . Ah yes, that’s what it’s called, in fact CSS Shapes. Shapes are cool!

Offline

#11 2019-12-19 12:25:31

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,263
GitHub

Re: stateofcss.com

Tangentially related: 2019.stateofjs.com (I think this appeared in the last day or so)

Offline

Board footer

Powered by FluxBB