CSS Vocabulary

[pamelafox]

Awesome! Just tweeted this out for our GirlDevelopIt students, this is a great review resource.

For those of you looking for alternative ways to learn CSS (or teach it), here are our materials:

* CSS Basics/Layout: http://www.teaching-materials.org/htmlcss-1day/ (Scroll down) * CSS3: https://dl.dropboxusercontent.com/u/10998095/css3-workshop/i...

...I find that teaching the CSS3 workshop is always a great reminder of the crazy ass selectors you can use in CSS now, and I end up using them way more in the weeks after. And then forgetting again. :-)

[indubitably]

This is awesome.

[zatkin]

This is really neat. I've been using CSS for several years and have never stumbled upon something that uniquely educates in this manner. You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification.

Also, this brings a lot of attention to the fact that CSS relies upon formal grammar and vocabulary (as the page is titled), which is something that you won't see often.

[Swizec]

What do you mean exhibit their own idea of grammar? All programming languages are defined in terms of their formal grammar. A grammar and vocabulary is really all that they are.

[reubenmorais]

>You'll only really grasp a true understanding of CSS like this if you sift through a lot of (dull) specification.

You'll likely only need this "true understanding" if you're editing said specification. Or implementing it.

[rmmw]

This is great! To anyone else delving into CSS, I also found this tutorial on CSS selectors helpful: http://flukeout.github.io/

[voltagex_]

This is a neat and simple idea. I wonder how difficult it would be to add other languages.

[harlanji]

I think it could be possible for any context-free language, through outputting the parse tree with ranges wrapped with class="symbol-type". CSS's grammar being like this (for those not familiar with the idea): http://www.w3.org/TR/CSS21/grammar.html, and JS's being like this: http://www-archive.mozilla.org/js/language/grammar14.html. You might want to have a black/white list of foundational grammar rules to ignore.

[bbx]

Very neat and straight to the point. I'm writing a book about CSS, and this comes in very handy considering the vocabulary in CSS is usually misused and lacks precision, especially on Stack Overflow (including by me).

[Trufa]

It's so hard at the beginning to google it,since you don't know the names. This is an extremely helpful tool for beginners!

[runarberg]

Really nice. Why did you skip the media query though?

    @media only screen and (min-width: 35em) {
        /* responsive styles */
    }

    @media print {
        /* printed styles */
    }

[SimeVidas]

Page footer:

Made by @sakamies Improvements welcome at https://github.com/sakamies/css-vocabulary

[bowlofpetunias]

For someone with only superficial knowledge of CSS but who regularly has to communicate with front-end devs, this is very very helpful.

A shared vocabulary is so important in any collaboration.

[reshambabble]

This is a really great visual way to learn CSS vocabulary. Love the simple and clear UX/UI. Have you thought about adding pop ups when you click on each term that explains the exact purpose of each? It could be an interesting way to expand this into a 5 minute self-taught tutorial.

[JazCE]

This is really nice, I might fork it myself and add to it as I'd like to see some more explanation on certain parts, though it would then become something different.

[ArtDev]

I always referred to a declaration block as "rules". A single declaration is a "rule". I am not sure where I picked it up, but it is simpler.

[SquareWheel]

Very neat and intuitive way to learn. I wasn't aware of the difference between "pseudo classes" and "pseudo elements" before.

[hackaflocka]

Great resource.

Anyone know of something like this for Javascript or PHP?

[nnq]

Why do they use `::before` instead of `:before`? Is that a typo?

[agr8man]

The double-colon notation is introduced in order to establish a discrimination between pseudo-classes and pseudo-elements.

Doesn't work with IE.

[bzbarsky]

Pseudo-elements use two colons. A small number ("before", "after", "first-line", "first-letter") are grandfathered in as allowing either one or two, for backwards compat back to the days when there was no distinction between pseudo-elements and pseudo-classes in CSS.

[conectorx]

well css is death so, no, thank you.

[hhsnopek]

how is CSS dead? CSS is going to live on forever as the base of styling. Stylus, SASS, LESS will always compile to CSS, and their will be a "religious war" of which one to make as the base.