CSS Vocabulary

http://pumpula.net/p/apps/css-vocabulary/

by pasiaj • 12 years ago

175 35 12 years ago

voltagex_• 12 years ago

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

harlanji• 12 years ago

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.

conectorx2• 12 years ago

well css is death so, no, thank you.

hhsnopek• 12 years ago

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.

conectorx2• 12 years ago

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

zatkin2• 12 years ago

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• 12 years ago

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.

zatkin2• 12 years ago

Sorry, I edited my post to clarify.

reubenmorais• 12 years ago

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.

dredmorbius3• 12 years ago

Not really.

I've spent a lot of time in the past year mucking with CSS, some my own, but most of it applying to other sites via browser extensions. I'd learned most of the specific spec entities described here (though learned a few terms I'd not picked out before), some of which have proven quite useful in getting the results I want. Which often translate to "make the goddamned page readable".

And yes, I restyled the referenced page to improve readability (text to white, larger fonts, different spacing and padding).

hackaflocka• 12 years ago

Great resource.

Anyone know of something like this for Javascript or PHP?

rmmw• 12 years ago

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

SquareWheel• 12 years ago

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

nnq• 12 years ago

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

agr8man• 12 years ago

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

Doesn't work with IE.

windsurfer• 12 years ago

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

bzbarsky• 12 years ago

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.

bowlofpetunias• 12 years ago

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.

bbx• 12 years ago

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• 12 years ago

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• 12 years ago

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

pamelafox• 12 years ago

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• 12 years ago

This is awesome.

JazCE• 12 years ago

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.

runarberg2• 12 years ago

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

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

    @media print {
        /* printed styles */
    }

SimeVidas2• 12 years ago

Page footer:

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

runarberg2• 12 years ago

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

reshambabble• 12 years ago

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.

ArtDev• 12 years ago

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.

CSS Vocabulary

Related Stories