
Tetris and The Power Of CSS - nej
http://www.heydonworks.com/article/tetris-the-power-of-css
======
ruswick
I love CSS's pseudo-selectors. In my opinion, they are the best part of CSS3
and are generally great.

However, I think the author's jabs at CSS pre-processors and their adherents
are unsubstantiated and a little unfair. I don't see how using SASS precludes
you from knowing about or using complex selectors. As the author points out,
SASS is merely an efficient and more intuitive way to write _classic CSS._ The
good parts of CSS are still the good parts of SASS, and by definition every
feature of CSS is a feature of SASS. It doesn't really follow that using SASS
predisposes you to be less knowledgeable about regular CSS.

If anything, people using SASS likely use many more complex styles and work on
larger projects, and are probably know more about and actively use more
aspects of CSS than do people who don't have a need for SASS.

~~~
epidemian
Not only that: if the author wanted to extend the trick for N-column grids,
then they'd probably need to use a CSS preprocessor to output the final CSS
rules (e.g. for N=5, the widths would be 20% and there'd be 4 special :last-
child:nth-child rules).

------
kika
Am I the only one who clicked the link expecting to see the Tetris in pure
CSS?

AskHN: is there a good online resource that actually explains the layout
mechanics of the modern browser? Not a comprehensive CSS reference (there're
lots of them) but fundamental principles? lmgtfy's welcome.

~~~
chadwickthebold
Is something like ([https://developer.mozilla.org/en-
US/docs/Introduction_to_Lay...](https://developer.mozilla.org/en-
US/docs/Introduction_to_Layout_in_Mozilla)) what you were looking for? Or Were
you looking more for how the browser reads CSS and sticks that into a
formatting context? For the latter, I would suggest visiting
[https://developer.mozilla.org/en-
US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) and poking
around the key concepts a bit

------
martian
Geoffray Warnants did a simple CSS3 Tetris in 2011:
[https://developer.mozilla.org/en-US/demos/detail/tetris-
css3...](https://developer.mozilla.org/en-US/demos/detail/tetris-css3-by-
geoffray-warnants/launch)

------
rallison
Great article on what is definitely a couple of nice and powerful features.
For those new to nth-child and last-child, they are both IE9 and above
features [0] [1] (of course, all non-IE browsers have proper support).

[0] [https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-
child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)

[1] [https://developer.mozilla.org/en-US/docs/Web/CSS/:last-
child](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child)

~~~
oneeyedpigeon
It staggers me when basic things like this are so late in the IE support game.
I mean, IE6 - fair enough. And complicated, new layout stuff (columns,
flexbox) - fair enough too. But selectors based on the index of an item in a
list?! Why the hell did MIcrosoft drag their feet for so long and screw us all
over - I can just imagine having to wait another 5 years before I can actually
use this stuff...

~~~
ygra
[http://selectivizr.com/](http://selectivizr.com/)

~~~
oneeyedpigeon
That requires javascript, so is appropriate for 'nice to have' design
elements, but not for core layout, etc.

------
jmduke
I love this article except for the argument it makes about preprocessors.
While I agree with the author that preprocessors do not replace the need for a
deep understanding of CSS3, that doesn't mean that preprocessors are useless
or bad; hell, the ability to nest rules alone saves me hours and hundreds of
LOC.

~~~
babysteps
I don't think the author is suggesting they are useless or bad.

------
gpmcadam
Great article, however I won't be satisfied until someone provides me with a
working CSS-only Tetris. _Hmph!_

------
cheapsteak
tldr:

    
    
        li:nth-child(3n + 1):last-child {
           float: none;
           width: auto;
        }
    
        li:nth-child(3n + 2):last-child {
            width: 66.666%;
        }

~~~
chii
i feel this should be a problem that's going to be solved by flex-box.

~~~
psadauskas
I feel like the solution presented is the correct one. Using flex-box divs for
everything won't be an improvement over table layouts.

~~~
Nilzor
Yes it will because you have separated layout from content

------
fat0wl
Thanks for giving some credit to plain old CSS. I've used SASS & am starting
to use LESS but I'm really appalled when job interviewers give me a strange
look when I say I don't use them religiously.

Same with COffeeScript... let's get real, pre-processing is great and all but
there are tons of scenarios where it's not worth it just to get around writing
extra sets of brackets or duplicating a bit of CSS.

Surely there are logic-intensive places where it is a huge boon but then I'm
surprised I don't see more people advocating the absolute need for something
like Dart rather than pre-processors.

Anyway, I feel like when you go to corporate work they want you to know atomic
level ("how do various browsers interpret this bit of css") whereas its the
smaller companies who want to know how many lines of code you saved by using
syntactic sugar ("do you use LESS or SASS?"). They're way impressed if you use
it even if it's just saving you 10 lines of code per project... Just an
observation about pre-processing / interviewing / code hipsterdom. :D

~~~
lowboy
CoffeeScript is much much more than just avoiding extra brackets. Anyone
avoiding it because of the hype should do themselves a favour and check it out
before dismissing it. I can't quantify the amount of time I've saved both
reading and writing CS instead of JS, but it's gotta be in the 10-20% range.

And please, can we drop the "hipster" meme around new languages/tools? People
experiment and adopt promising new technologies because they see a benefit to
using them.

------
stormbrew
I really don't get why this article starts off with a rant about less and
sass. What do pre-processors have to do with anything demonstrated? Do they
make these things harder somehow?

------
Bahamut
I know of this pseudo-selector. I've avoided really using it because of IE
though.

~~~
rallison
I'm sort of in the same boat as you in that I have to support IE8 for one of
my projects. However, these selectors are often used to simply enhance the
appearance of something, so the lack of IE8 support isn't a big deal.
Basically, I let certain styling gracefully degrade instead of simply not
using the newer CSS rules.

~~~
Bahamut
To be fair, in all of my side stuff I ignore IE completely, but at work I've
been tasked almost exclusively on the JS with IE8 support, so I haven't had to
worry about it. Great point though!

------
peterhunt
While I agree with the premise that css preprocessors are overused, I can't
stress enough that the use of complex css selectors is a really bad idea. Not
only can it kill performance (or at least make it hard to reason about) it
encourages tight implicit coupling between the style sheet and the document
which generally leads to hard to maintain front ends.

~~~
camus2
> While I agree with the premise that css preprocessors are overused

I'd like to know how one maintains a huge modular css code base without any
sort of preprocessor.

Preprocessors are here because CSS sucks, and no standard committee seems to
want to fix it. That's why people built these tools right, to solve a problem
nobody was going to solve for them.

That's exactly the same thing with javascript. If javascript was decent we
would not need all these compile to javascript languages.

These tools bring diversity and choice to a poor plateform with shamefull
languages that are not evolving very fast. You cant fix it just by adding
features without fixing the core. that's what preprocessors are for and it's
ok to abuse them without shame.

EDIT:

my point is "it's good enough" isnt good enough, in a time where we are
supposed to maintain complex front-end projects and asset pipelines, that work
on different devices that have their own idea of how to implement (poorly
written) standards.

~~~
peterhunt
Well, I think JavaScript is good enough (I do prefer Python though) and we
certainly don't _need_ compile-to-JS languages like CoffeeScript (which IMO
just takes a somewhat-ambiguous syntax and makes it more ambiguous).
TypeScript is somewhat of an exception, but I view it less as a language
(since it doesn't change runtime semantics afaik) and more of hints to a
linting tool.

The problem with CSS preprocessors is that they are simultaneously too
powerful and not powerful enough. That is, things like SASS mixins and nesting
make it easy to make mistakes (specificity overload and huge stylesheets are
the two big ones). At the same time they don't change runtime semantics so you
can't fix the biggest problems in CSS like specificity wars, finding dead
selectors and namespacing.

I do like variables and expressions though (mainly for colors and grid units).

The way you maintain a big modular codebase is to make your stylesheets really
stupid and build the smarts into whatever is generating the DOM. The tools we
have for generating DOM are both far more mature and we have more control over
the semantics of the runtime.

------
xarien
I'll toss my 2 cents in. People often forget that one of the biggest
components of UX is page rendering speed. This solution while addressing a
visual inconsistency will slow down the page considerably.

~~~
lowboy
I wouldn't say "considerably" for most pages. From what I've read, complex CSS
selectors won't have much of an appreciable impact on your average site/page.

[http://stackoverflow.com/a/12279783/179609](http://stackoverflow.com/a/12279783/179609)

~~~
xarien
Pseudo classes are very slow. Take a look at the bottom of the table he had
using more complex attributes. The bottom line is that when we don't know how
many elements are going to be cycled, it's a good practice to think in terms
of worst case scenario.

------
Snowda
Would it be better to adjust the first element rather than the last one, as
the first element is most likely to be the most important?

~~~
joshvm
I think it's just for effect - the point of the article is determining which
elements to act on. The author mentions you could just apply centering to the
element instead.

------
talles
"Did you think I was actually going to recreate Tetris in CSS? Sorry, no.
Nobody needs to do that."

What a major let down :(

------
wesleyac
Aww, I was expecting a game of tetris in CSS.

But awesome all the same

------
msoad
Is it a new thing? I zoom OUT for many articles that are shared here in order
to read them easily.

~~~
babysteps
I think it's a responsive trend. Many sites even think my 1280x800 screen size
is small and notch me into a mobile friendly view. Which is good for me as I
normally zoom by about 125%. Personally 16px is comfortable for me with my
resolution at about 1/2 metre.

I fix the font size and font in Firefox and state a preference in Chrome
(seems to get overridden). I have a default zoom of 125% for Chrome, but it's
starting to look like I can ditch that soon, as author's are changing their
designs.

Sometimes resizing the window can lead to something more pleasing (font sizes
can also change depending on the window size.) Resizing the browser doesn't
play that well with tabs - resize one and you resize them all.

“You can please some of the people some of the time all of the people some of
the time some of the people all of the time but you can never please all of
the people all of the time.” ― Abraham Lincoln

In general though responsive sites are better for me.

~~~
babysteps
When I say 16px is comfortable for me, I'm referring to font-size.

