Web Development

3439 readers

1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Follow the programming.dev site rules
Keep content related to web development
If what you're posting relates to one of the related communities, crosspost it into there to help them grow
If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

[email protected]

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

https://frontendfoc.us/ - [RSS]
https://wesbos.com/blog
https://davidwalsh.name/ - [RSS]
https://www.nngroup.com/articles/
https://sia.codes/posts/ - [RSS]
https://www.smashingmagazine.com/ - [RSS]
https://www.bennadel.com/ - [RSS]
https://web.dev/ - [RSS]

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

[email protected]

Tailwind vs. normal CSS - performance and size (nuejs.org)

submitted 8 months ago* (last edited 8 months ago) by [email protected] to c/[email protected]

39 comments fedilink hide all child comments

This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS.

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 0 points 8 months ago (3 children)

Having used it in a major project its a shame that its so inefficient because the user experience really is much much better. It feels like a successor language to CSS because it fixed lots of unobvious and badly named attributes and makes lots of things just easier.

The code is more verbose but also you can completely understand how the page will look just by reading the html.

That said it makes sense the performance is so much worse, where you would have matched on one class for N styles you now match on N classes for N styles.

Theoretically its totally possible to do that matching at compile time and 'compile' the string of classes you wrote into individual ones per element for each combination used in the html though.

[–] [email protected] 0 points 8 months ago

Tailwind is only feels like a successor to CSS to developers writing css like it was 10 years ago (or using frameworks that write it like that, e.g. bootstrap), or projects not using visual regression testing.

Modern css is so much better.

Want to position, overlap, or align things? Use CSS Grid.
Are you using a CMS or component system and want to change the order that CSS is applied? Use Cascade Layers.
Want to have resizeable components? Use component queries.
Want to make a change all through your site? Use custom properties.
Want to style things differently based on how many other elements are inside or around it? Use :has(), +, ~, nth-..., ... selectors.

If you're using something like BEM, or bootstrap to make columns, your knowledge is way out of date and you're doing it wrong.

[–] [email protected] 0 points 8 months ago (1 children)

It seems that we’ll get up to 10x soeedups with v4: https://tailwindcss.com/blog/tailwindcss-v4-alpha

[–] [email protected] 0 points 8 months ago

The performance improvements in v4 are for compilation times, not rendering.

[–] [email protected] 0 points 8 months ago

you can completely understand how the page will look just by reading the html

You lose being able to read meaning and structure though, and you also lose technical accessibility.

I like to add css hacks to websites. But I can't if they don't have useful, identifying, and stable selectors.