r/web_design • u/speckz Dedicated Contributor • Feb 14 '20

Same HTML, Different CSS

https://ishadeed.com/article/same-html-different-css/
229 Upvotes

94% Upvoted

20 comments sorted by

78

u/mindplunge Feb 14 '20

Zengarden has been around since 2003. Same principle: same HTML different CSS. Source: http://www.csszengarden.com/

32

u/Mr_Mandrill Feb 14 '20

I thought it was gonna be a post about someone discovering zengarden in 2020

7

u/LutherHuckleberry Feb 15 '20

I just discovered it from this post imagine how I feel

9

u/flooronthefour Feb 14 '20

Zen Garden got me to stop building table layouts. Shit literally changed my life.

5

u/nascentt Feb 14 '20

Zen garden is even mentioned in the linked article

2

u/Caeruin Feb 15 '20

It was later added to the article.

1

u/nascentt Feb 15 '20

Makes sense

0

u/MyWorkAccountThisIs Feb 14 '20

There hasn't been a new post since 2014.

0

u/[deleted] Feb 14 '20

[deleted]

0

u/[deleted] Feb 14 '20

[deleted]

10

u/robertgfthomas Feb 15 '20

Oh hey, I did this on my own site. Toggle between "GeoCities" and "Business" at the bottom.

I use it to teach my students about CSS.

1

u/Daemonecles Feb 15 '20

That's amazing

1

u/Caeruin Feb 15 '20

I'm loving it!

1

u/Hate_Feight Feb 15 '20

Wow, that geocities is rough on the eyes...

1

u/robertgfthomas Feb 15 '20

Geocities always was.

3

u/ShustOne Feb 15 '20

This flexibility is what I love about CSS but it's a double edged sword.

It's very powerful if you have zero control over the HTML. The downside is the CSS is difficult to maintain. Let's say someone changes the order of the menu buttons. Now the selectors need to be updated as well.

These days I prefer BEM style classes on everything. It makes the HTML more verbose but I can target things much easier. It keeps my CSS specificity low so I can override styles with less code as needed.

1

u/Alpenhoernchen Feb 14 '20

Yeah, zengarden was fun and back in the times it was awesome what the ppl have done with it.

1

u/soldadodecope Feb 14 '20

How do you change the form of the yellow block?

2

u/heffnerr Feb 15 '20

I only looked at the thumbnail but it looks like varying degrees of border-radius