What style of CSS class names should I teach?

[Benjamin Hall]

One of the hardest things for my beginning HTML/CSS students to learn is good naming. Class names like a, b, c, one,box etc. abound. I'm sure that part of that is me being waffle-y on a standardized naming convention. I'm trying to do better this semester, and want feedback from people who have actually done this for real.

Which style do you prefer? Note that we're not using a framework like Bootstrap. They're writing all of this by hand.

a) "traditional" semantic names: nav-bar, side-bar, banner-image, etc? Advantage: keeps presentation and markup separate. Downside: longer styles and lots of duplication.

OR

b) "modular" descriptive names: blue, wide, left-bar, important? Advantage: short, easily reused styles. Little duplication. Disadvantage: mixes presentation and markup. Lots of classes per element can get confusing.

OR

c) something else entirely?

I want to present a "standard" default naming scheme as a starting point for them writing code.

[izzion]

@benjamin-hall
Obviously, the best naming conventions are the ones that draw from popular culture.

frodo, gimli, sleepy, sneezy, dopey

[ben_lubar]

@benjamin-hall semantic names, but use something like LESS or CSS3 variables to reduce duplication.

[Benjamin Hall]

@ben_lubar said in What style of CSS class names should I teach?:

@benjamin-hall semantic names, but use something like LESS or CSS3 variables to reduce duplication.

I'll be using CSS3 variables no matter what--it's the first time they're widely accepted enough. Any kind of pre-processor/CSS compiler is right out due to other limitations.

[pie_flavor]

@benjamin-hall said in What style of CSS class names should I teach?:

they have to be able to do the entire class on iPads

wat.

[Jaloopa]

@pie_flavor "what's a computer?"

[Benjamin Hall]

@pie_flavor said in What style of CSS class names should I teach?:

@benjamin-hall said in What style of CSS class names should I teach?:

they have to be able to do the entire class on iPads

wat.

We're a one-to-one iPad school. It's actually quite doable using apps like Textastic (works much better if they have an iPad Pro or an external keyboard, but...). Biggest single limitation is that version control can't be done without lots of workarounds that they don't have patience for.

Edit: wait--the biggest drawback is not having the developer tools in the browser. That's obnoxious when Mobile Safari decides to go all on you.

[pie_flavor]

@benjamin-hall That is fucking moronic. My high school definitely had a Chromebook boner, but nobody made the mistake of suggesting that any of the tech classes use them instead of a computer lab.

[Benjamin Hall]

@pie_flavor said in What style of CSS class names should I teach?:

@benjamin-hall That is fucking moronic. My high school definitely had a Chromebook boner, but nobody made the mistake of suggesting that any of the tech classes use them instead of a computer lab.

The only computer labs we have are:

a) the robotics lab (uses PC desktops due to software constraints)--that's constantly in use.
b) the yearbook room (they have iMacs due to needing more screen space + software constraints)
c) some small (5-6 computer) hubs that the middle school uses.

There are a few carts with old laptops, but they're shared.

I can't install software on any of the systems, and the kids wouldn't have persistent user accounts either. And they're all in use.

For what I do, it actually works fine. The full programming classes (C++, python, swift) use a dedicated set of desktops, although there are python interpreters that do fine for the iPad.

[dkf]

@benjamin-hall said in What style of CSS class names should I teach?:

Which style do you prefer?

s1, s2, s3, …

[The_Quiet_One]

@jaloopa said in What style of CSS class names should I teach?:

@pie_flavor "what's a computer?"

Every time I see that commercial, I involuntarily and nearly throw up in my mouth.

Anyways...

b) doesn't have to necessarily mix presentation and markup. You can still do something like primary button and just button to distinguish between a blue button and a less prominent button, for instance. Your presentation theme should reflect a consistent semantic pattern anyways, and usually your color theme is going to be a small set of colors such as "primary," "highlight," "light," and "dark."

The more challenging part is what to do with layout. I would suggest, since you're in CSS3, just defining some preset flex-box rules and apply them to divs that translate them to columns. On the other hand, teaching everything about flex-box is probably itself a half-semester course, so maybe you don't want to do that. :)

[Benjamin Hall]

@the_quiet_one said in What style of CSS class names should I teach?:

The more challenging part is what to do with layout. I would suggest, since you're in CSS3, just defining some preset flex-box rules and apply them to divs that translate them to columns. On the other hand, teaching everything about flex-box is probably itself a half-semester course, so maybe you don't want to do that. :)

For layout we're using CSS3 Grid. Since I'm only worrying about supporting modern browsers, it makes a much easier layout than flex-box. Been there, done that. It was...not fun.

I'm leaning toward that style (a mix of the two with variables to cut down on copy-paste) at this time.

[Gurth]

@benjamin-hall Semantic names — it’ll (hopefully) teach them that function and appearance are not the same thing, and that this will save effort if they decide that P.blue should really be {color: yellow} after all.

[Benjamin Hall]

@gurth said in What style of CSS class names should I teach?:

@benjamin-hall Semantic names — it’ll (hopefully) teach them that function and appearance are not the same thing, and that this will save effort if they decide that P.blue should really be {color: yellow} after all.

That was my initial thought, but for things like that, they'll have to make the changes much more globally, so either a variable-based approach or having separate .blue { color: blue} and .yellow {color: yellow} and switching the class in the HTML seems easier...

[Gurth]

@benjamin-hall Search-and-replace class names in the HTML files? What could go wrong?

[Benjamin Hall]

@gurth said in What style of CSS class names should I teach?:

@benjamin-hall Search-and-replace class names in the HTML files? What could go wrong?

Otherwise you're search-and-replacing color names in CSS.

And using the @The_Quiet_One's mention of things like primary or secondary or detail instead of explicit blue, red, etc names fixes the whole problem without tying too many things together in a single set of rules. Smaller classes make for easier debugging, IMX.

Which (debugging) is something they're desperately bad at. A few of them get beyond the "random-walk fix-and-check" stage, but only a few.

[Gurth]

@benjamin-hall said in What style of CSS class names should I teach?:

Otherwise you're search-and-replacing color names in CSS.

My idea is that it’s easier to go to one or a few places in a CSS file and change things than it is to replace class names in a bunch of HTML files.

And using the @The_Quiet_One's mention of things like primary or secondary or detail instead of explicit blue, red, etc

Those sound like semantic names to me.

[Benjamin Hall]

@gurth As I've understood it, semantic names should abstract out the appearance entirely. Those are kind of hybrid names--they're not as transparent as .blue, but they do contain appearance information. If you wanted to change that sidebar to be a different color (from your limited palette), you'd change the HTML class to secondary or informational or whatever rather than changing the CSS-side rule.

Warning--thinking in text:

Consider the following HTML

<div class="banner">...</div>

That's pure semantic classes--you have to look at the CSS to tell how it's arranged. You only have to look in one place, though. That raises duplication issues...

Now consider the polar opposite:

<div class="top full-width primary">...</div>

Here the class names tell about the layout (coupling content and presentation), but it's clear where to look for each thing. You can also see exactly what's going wrong because you can narrow it down to fewer interacting components.

The first style seems more like reuse-through-inheritance and the second is more reuse-through-composition.

[Rhywden]

@benjamin-hall said in What style of CSS class names should I teach?:

Edit: wait--the biggest drawback is not having the developer tools in the browser. That's obnoxious when Mobile Safari decides to go all on you.

I already stumbled over that one. Every new browser implements the touch events and those events even have a type so you can discern whether it was a mouse, finger or pen which initiated the event (and subsequently track it).

What's a big selling point for the iPad Pro? The pen.

What does the iPad Safari browser not implement? The possibility of distinguishing between finger and pen touch events.

[The_Quiet_One]

@benjamin-hall said in What style of CSS class names should I teach?:

Which (debugging) is something they're desperately bad at.

Can anyone honestly say they are good at debugging CSS?

[Benjamin Hall]

@the_quiet_one said in What style of CSS class names should I teach?:

@benjamin-hall said in What style of CSS class names should I teach?:

Which (debugging) is something they're desperately bad at.

Can anyone honestly say they are good at debugging CSS?

Browsers don't make that easy, by any stretch of the imagination. The whole "swallow errors and ignore everything I don't understand" issue (also found, but worse in HTML) is a pain in the butt.

[AlexMedia]

Isn't this what BEM is for?

BEM — Block Element Modifier

[The_Quiet_One]

@alexmedia I've used BEM, and I was even ready to suggest it. But if you're brand new to CSS, I think teaching the basics to start is better than also introducing them to this. Then again, perhaps I'm biased because I learned the basics of CSS long before BEM was a thing and teaching CSS and BEM at the same time isn't as challenging as I think.

[Benjamin Hall]

@alexmedia said in What style of CSS class names should I teach?:

Isn't this what BEM is for?

BEM — Block Element Modifier

That seems needlessly verbose. And absolutely annoying to teach to beginners. So no. Unless you can give more explanation than what that site provides.

[Dragnslcr]

@benjamin-hall said in What style of CSS class names should I teach?:

b) "modular" descriptive names: blue, wide, left-bar, important? Advantage: short, easily reused styles. Little duplication. Disadvantage: mixes presentation and markup. Lots of classes per element can get confusing.

If this is your convention, there's no point in using classes at all. You might as well just dump the rules into each element's style attribute.

[djls45]

@Benjamin-Hall I'm going to be intrepid and suggest (c) teach both. Describe the pros and cons of each method as you (and others) have done here and then let each student decide which way makes the most sense for them, and then grade (if you are grading on this) based on readability and consistency.

[Benjamin Hall]

@djls45 that doesn't really work at this level. Understanding why one might be better requires a level of familiarity and understanding of the underlying fundamentals that these students (based on several years of experience) don't have. Many of the students are taking the class as an art credit, so they're less invested.

Honestly, I just want a baseline. If someone deviates and does so well, with reasoning, I'm fine with that. But I want them to have a default "list" of names to pull from.

[djls45]

@Benjamin-Hall I think semantic names would probably work better for them, then, especially with the earlier, smaller projects. Start with simplicity and build up to more complicated levels. In this case, students unfamiliar with coding will more easily make the connection between an element's class and its styling. Looking at the HTML and at the CSS takes less work to remember what is what. The element <div class="nav-bar"> is clearly the navigation bar, and so is .nav-bar { }. Remembering that <div class="top wide bold blue-back white-text"> is the nav bar is much harder.

Later in the class, when the projects get larger, you can begin to introduce modularity to show them how they can cut down on the amount of CSS that they need to write. ("Here's a bunch of classes that have the same descriptors. We can pull that commonality out to its own class.") They can then (or as extra credit) work on building complex CSS styling sheets that stack multiple classes on one element (in addition to the inherited styles).

If you start with the modular naming model, then you blur the distinction between the HTML (content) and the CSS (styling). I think those should be as sharply defined as you can make them early on, so that the students can create their own baselines and have a better understanding later on for determining when that blurring is worthwhile.

[Benjamin Hall]

@djls45 That's what I've been doing up til now, but it does have a strong drawback for these particular kids--naming is hard. Good semantic names require understanding what the component is in a way that is really hard to grasp for some reason. Same with class/function names in regular languages.

I get a lot of

<div class="a">
<div class="b">
<div class="one">
<div class="Camembert">

(no, seriously I had a kid who did all his class names after kinds of cheese). This makes them have to go back and forth between html and css--which class was that again?

Maybe I'll make a beginning white-list of "approved" names that cover a wide variety of common elements that they can fall back on.

That, and kids seem to believe in magic--just giving something the class nav-bar makes them think that the browser somehow knows how to make it a nav bar. Disillusioning them is a pain sometimes.

[djls45]

@Benjamin-Hall said in What style of CSS class names should I teach?:

Maybe I'll make a beginning white-list of "approved" names that cover a wide variety of common elements that they can fall back on.

That, and kids seem to believe in magic--just giving something the class nav-bar makes them think that the browser somehow knows how to make it a nav bar. Disillusioning them is a pain sometimes.

As a kid, I used to wonder why a saved web page usually looked vastly different than the original "internet" one. Then I learned a little about CSS, so I can imagine how that usually goes:

: Every class needs to be described in the CSS. That's how the browser knows how to display the elements that use it.
... (later) ...
: TeacherSensei, I wrote <div class="sidebar">, but it doesn't look like a sidebar!
: Did you tell it in the CSS how a sidebar should appear?
: Oh no, I forgot to do that. Do I have to do that for everything? That's so much typing, though!
: Yes, you do. And that tedium is why employers hire web designers for lots of money to write it for them. But a lot of designers and programmers got started and stay with it because they enjoy being able to see their project finally look the way they imagine it.

---

One of my own CS teachers said that writing code one of the most pure forms of creation that humans can attain. To exactly represent our own ideas in a way that other people can instantly recognize is pretty amazing. J.R.R. Tolkien believed that writing and creating his world of Middle Earth was his way of fulfilling the calling to be more like Christ, in this case as Creator. Computer programmers have a similar ability, but we can create worlds that other people can interact with, which is a step above a novel.

[pie_flavor]

@djls45 literally, in the case of video game development.

[Gurth]

@benjamin-hall said in What style of CSS class names should I teach?:

@gurth As I've understood it, semantic names should abstract out the appearance entirely. Those are kind of hybrid names--they're not as transparent as .blue, but they do contain appearance information. If you wanted to change that sidebar to be a different color (from your limited palette), you'd change the HTML class to secondary or informational or whatever rather than changing the CSS-side rule.

Ah, yes, I see what you mean now. You suggest using primary as in “appearance for primary things on the page” — I thought you meant it as “thing of primary importance”. In your case it’d be a kind of hybrid way of doing things, the way I understood it, it would be purely semantical.

I’m still not convinced it’s a good idea, though, and for myself prefer as close to semantic as I can get. Still, I don’t always succeed, usually where floating boxes are concerned.

[cartman82]

From these two choices, I'd definitely go with "traditional" semantic naming.

That modular system is going in exactly the opposite direction than the industry. It is aiming to increase the number of classes and embracing the cascading nature of stylesheets. Bad idea. Experience has shown this leads you into a hellscape of "write-only" CSS, where any time you change anything, random things start breaking all over the place.

Where you should really lead your students as they progress is towards fewer classes, more direct ancestor rules and less cascading in general. Stuff like BEM or SMACSS.

When I name CSS classes these days, they usually look like this: .cartman-NavigationSection-content-items-item. It's working great with preprocessors that allow me to write these names without repetition. It also help you debug stuff in the inspector.

[anotherusername]

@benjamin-hall said in What style of CSS class names should I teach?:

(no, seriously I had a kid who did all his class names after kinds of cheese)

[ben_lubar]

@the_quiet_one said in What style of CSS class names should I teach?:

@jaloopa said in What style of CSS class names should I teach?:

@pie_flavor "what's a computer?"

Every time I see that commercial, I involuntarily and nearly throw up in my mouth.

Most Apple commercials have that effect on me, but that specific one is especially potent.

[AlexMedia]

@benjamin-hall

BEM is just a way of structuring CSS. You shouldn't start with BEM as it will be very confusing for your students and it will distract them from the work they're trying to achieve.

I think you should first start with the basis (what is CSS? what are selectors? what does the "cascading" stand for?) before you move to the somewhat more advanced topics such as ways to structure your code. It's like any programming language course: first do a "Hello, world", then move to control structures (for, if, and friends) and slowly dive deeper into classes, namespaces, interfaces, and so on.

If BEM isn't your thing, that's okay. There are other guidelines for structuring CSS, such as SMACSS:

Home - Scalable and Modular Architecture for CSS

[Dreikin]

@alexmedia said in What style of CSS class names should I teach?:

It's like any programming language course: first do a "Hello, world", then move to control structures (for, if, and friends) and slowly dive deeper into classes, namespaces, interfaces, and so on.

Introducing friends that early seems like you're jumping the gun a bit.

[Benjamin Hall]

@alexmedia said in What style of CSS class names should I teach?:

@benjamin-hall

BEM is just a way of structuring CSS. You shouldn't start with BEM as it will be very confusing for your students and it will distract them from the work they're trying to achieve.

I think you should first start with the basis (what is CSS? what are selectors? what does the "cascading" stand for?) before you move to the somewhat more advanced topics such as ways to structure your code. It's like any programming language course: first do a "Hello, world", then move to control structures (for, if, and friends) and slowly dive deeper into classes, namespaces, interfaces, and so on.

If BEM isn't your thing, that's okay. There are other guidelines for structuring CSS, such as SMACSS:

Home - Scalable and Modular Architecture for CSS

At the level I'm dealing with, I doubt there will even be the possibility of getting beyond the very basics. For many of these kids, the idea of a structured language like HTML or CSS is completely alien. They're ok at using devices, but don't know anything beyond the very surface. And many haven't even explored the bounds of what's already available in the settings for their devices. I'll have to hold hands throughout for those kids.

Of course, I also will have a kid who's been programming VR programs since the first dev kits for the Oculus Rift came out (and basically solo runs the VR lab/club we have; he knows more than the faculty on that subject). I end up giving the advanced kids the freedom to run wild and do something amazing (and therefore expect more from them on projects).

[ScholRLEA]

@alexmedia Why do I keep reading that (in a Blakey-esque fashion) as Bug Eyed Monsters?

Filed Under: Or worse, see the 'E' as an 'O' and wonder what UTF-16 has to do with it.

[boomzilla]

@benjamin-hall said in What style of CSS class names should I teach?:

b) the yearbook room (they have iMacs due to needing more screen space + software constraintspublishing weenies always insist on this shit)

[boomzilla]

@benjamin-hall said in What style of CSS class names should I teach?:

(no, seriously I had a kid who did all his class names after kinds of cheese). This makes them have to go back and forth between html and css--which class was that again?

I dunno...I've always found myself doing this sort of thing anyways (going back and forth, not a cheese naming convention).

[Benjamin Hall]

@boomzilla But bad naming conventions are like missing indexes--it forces a whole table (file) scan to figure out you were looking at. And if you're like me (with juvenile-onset Oldtimer's syndrome, the mental cost of such scans (and the chance of error) is astronomical.

[boomzilla]

@benjamin-hall

Benjamin Franklin: Experience is a dear teacher, but fools will learn at no other.

Explore all famous quotations and sayings by Benjamin Franklin on Quotes.net

[devjoe]

@benjamin-hall said in What style of CSS class names should I teach?:

I get a lot of

<div class="a">
<div class="b">
<div class="one">
<div class="Camembert">

(no, seriously I had a kid who did all his class names after kinds of cheese).

It wasn't CSS; it was too early for that. But I was a TA for a class way back when using Matlab 3.5j and most of my students either named their functions boringly (i.e. set1prob2) or descriptively. But I had one student who named all her functions with various animals, and before long tried to name a function dog. And came to me for help because the dog function didn't work.

I investigated and pretty quickly got to the point where I replaced the contents of dog with hello world and saw that it wasn't running the function at all. Dog was a hidden reserved word, or something (it was apparently doing nothing and returning nothing), and I told her that dog was reserved, and to call her program something else.

At the next TA meeting, relating this incident led to others informing me of the special responses Matlab had to certain four letter words (one response was "Your place or mine?"). Later versions removed these easter eggs.

[Polygeekery]

@pie_flavor said in What style of CSS class names should I teach?:

@benjamin-hall said in What style of CSS class names should I teach?:

they have to be able to do the entire class on iPads

wat.