Learning the CSS Vocabulary

Here’s a little tool to help learn css. Would be quite useful to go along with a css tutorial for beginners. Might even be a useful quick reference for seasoned professionals too.

Check out the css Vocabulary

Thanks to Divya Manian and her article on css Vocabulary, it was the initial inspiration to start working on this.

How Did It Come About?

A while ago, for some reason I can no longer recall, I was looking for a good reference about the exact terms for what is what in css. The w3c specifications are a bit heavy and not very good for memorizing simple things, although I did finally read a bunch of them, so I could be certain of the correct syntax and definitions. The first result on google when searching for “css vocabulary” was the css Vobaculary article at Nimbupani Designs. If you don’t know the spec by heart, you should go at least read the article. I wasn’t very happy with the demo there, so I started making my own.

I ended up with an html structure for marking up css, and some css to style the markup for the css structure. Sounds kind of crazy, but I think the end result is pretty useful. You can click on any part of the css file and the css inspector will tell you what it is. I would have liked to implement loading your own css. I’m guessing that’s why I was searching for a vocabulary in the first place. I wanted something with which I could refer any particular piece of css to the relevant part of the specification, to find out what something in my file exactly is so I could search a fix for a bug or something. From what I understand, the dom api for css isn’t quite granular enough to construct the kind of markup I have here. I’d need an implementation of some sort of lexical parser. Oh and I forgot to include pseudo elements and pseudo classes in the sample code. One more thing to add to the always endless todo list on any project.

How Does It Work?

Here’s a snippet of how the html is structured, written in haml for brevity.

%code.language-css
    .statement.rule-set
        .selector
            .simple.id-selector #some-id
            .combinator.descendant >
            .simple.type-selector div
        .declaration-block
            .declaration
                .property margin
                .value
                    .length
                        .number 15
                        .unit px

Most of the syntax that defines the structure of a css file is added via css, to have the html markup be easier to manipulate, only having to focus on structure and content there as the css syntax comes automatically from the styles. Does this make any sense, talking about styling an html document that describes css? There should be proper terms for talking about the code that is being presented, and the markup and css that creates the presented code. A code example should clarify, here you go.

.declaration::after {
    content: ";";
}
.declaration-block::after {
    display: block;
    clear: left;
    content: "}";
}

…and so on. Nothing too complex, just adding some characters here and there.

Classitis, You Say?

With a meaningful and clean class structure, the help text can be constructed from the actual classes by removing dashes and any ui classes that do not describe the css (like .collapsed, for collapsing blocks), and adding commas between words. Every selectable element has the attribute tabindex="1", so each element is natively selectable without the need for javascript. There’s just an event handler for the focus event that updates the definition of the element to the green bubble at the top. Here’s the code.

$(selectable).bind('focus', function(event) {
    var whatIsThis = $(this).attr('class');
    whatIsThis = whatIsThis.replace(' collapsed', '');
    whatIsThis = whatIsThis.replace(' ', ', ').replace('-', ' ');
    $('#info').text(whatIsThis);
}

A Lexologist Needed

Is that even a word? I’d love to get some guru-level help to get some kind of file import working. I have a function already that uses the browser provided css objects. It generates markup down to the level of selectors lines, values and properties, but it only gets the browser parsed declarations, so any vendor prefixes and shorthands are lost.

The Relevant Specifications Used for Reference