
CSS Vocabulary - pasiaj
http://pumpula.net/p/apps/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/](http://www.teaching-materials.org/htmlcss-1day/) (Scroll down) * CSS3: [https://dl.dropboxusercontent.com/u/10998095/css3-workshop/i...](https://dl.dropboxusercontent.com/u/10998095/css3-workshop/index.html#slide3)

...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.

~~~
zatkin
Sorry, I edited my post to clarify.

------
rmmw
This is great! To anyone else delving into CSS, I also found this tutorial on
CSS selectors helpful:
[http://flukeout.github.io/](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](http://www.w3.org/TR/CSS21/grammar.html),
and JS's being like this: [http://www-
archive.mozilla.org/js/language/grammar14.html](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!

~~~
LanceH
This is very helpful, because even though I can produce css I sure didn't know
the names of anything.

------
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](https://github.com/sakamies/css-vocabulary)

~~~
runarberg
Thanks for telling me, In fact I did send a pull request on the matter.
(Although I don't understand the down-vote for stating a constructive
criticism, what if I didn't know the vocabulary for media queries and was
genuinely hoping to learn it on this site?).

~~~
SimeVidas
I didn't down-vote.

------
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.

~~~
windsurfer
> Doesn't work with IE

That's not true. IE has supported it since IE9 at least.
[http://msdn.microsoft.com/en-
us/library/ie/cc304078%28v=vs.8...](http://msdn.microsoft.com/en-
us/library/ie/cc304078%28v=vs.85%29.aspx)

------
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.

~~~
conectorx
just because you use it, or because you like it does not mean is the right
approach for styling websites. The future is canvas.

~~~
kingnight
How would one create a document type page with a canvas? I'm generally curious
and would love an example. I've use canvas before, but strictly for image
manipulation and exploring animation.

My experience and limited knowledge of it don't lead me to believe it'll
replace HTML/CSS documents anytime soon (which are really the starting point
before blogs/apps).

What about resizing causing the whole canvas to be wiped away (thats a default
behavior right?).

Edit: Also, how do you achieve separation of content and style?

~~~
jarek-foksa
Canvas is just a low level API for 2D graphics, on top of it you could build
your own rendering engine with custom document object model, document
serialization format, layout engine, styling engine, etc. This would be an
enormous amount of work though, I don't believe that standard HTML/SVG/CSS/DOM
are that broken that reimplementing them from scratch would become a viable
option.

