Suggest CSS class names for beginner whitelist

[Benjamin Hall]

I'm making a "whitelist" of CSS class names for the introductory web design (HTML and CSS only) class I'm teaching. Basically, these are supposed to be "pre-approved" class names for specific element/role combinations. This is an attempt to get them to stop using one, two, and cheese names for their classes (as this inhibits their learning and looks bad).

I've come up with some, but I'm going to throw it open to you trolls. Suggest useful, descriptive class names for various common elements and roles (the same tag might have several different roles, and the same role might have many tags that are used for it). Please specify a role to which this applies.

Note I'm not using BEM or any other strict methodology. This is way more basic than that. Just vaguely semantic names. I will be using css variables, but no pre-processor.

Containers:

tag	role	class name
header	container for top content	page-header
ul	navigation bar container	nav-bar
li	navigation bar item	nav-item
div	outermost CSS-grid container	grid-container
figure	captioned image container	image

Display Classes (for easy setting of theme without copy-paste)

tag	role	class name
any block	set to primary theme	primary
any block	set to accent theme	accent
any block	set to highlighted theme	highlight

What other common roles are there for elements? What's a good name for that class?

[dkf]

@benjamin-hall said in Suggest CSS class names for beginner whitelist:

What other common roles are there for elements? What's a good name for that class?

I think it's often quite nice to have the real content of the page (as opposed to the header, sidebar, adverts, etc.) in a div of its own, probably with a class name of content or something like that.

[Benjamin Hall]

@dkf I was thinking of having them use semantic tags (<main>/<article>, <aside>) for that, but yeah, I'll add those.

[heterodox]

@benjamin-hall said in Suggest CSS class names for beginner whitelist:

@dkf I was thinking of having them use semantic tags (<main>/<article>, <aside>) for that

I mean, you could say the same about header.

[Benjamin Hall]

@heterodox yeah, true. I'll have them use both (so that they're mostly referring to class names in CSS rather than tag names).

[remi]

@benjamin-hall I think you mentioned it in the other thread about this, but aren't you afraid that by specifying "standard" names that students should use, they might start thinking that the names themselves matter? (i.e. that something called "nav-bar" will magically behave like a navigation bar)

Maybe you could try and build the list with the students, spending 5 min to fill in the list with their suggestions (under your guidance), so that it's clear that they can use any name they want, but that what matters is that everyone in the group (class?) uses the same thing for readability?

[Adynathos]

@benjamin-hall
I do not think that every HTML element has to have a class.
For example, instead of putting a nav-item on every li in navbar, put .navbar on the container and use relative selector .navbar li in CSS.

tag	role	class name	alternative selector
header	container for top content	page-header	.navbar or body > header
ul	navigation bar container	nav-bar	.navbar ul
li	navigation bar item	nav-item	.navbar li
div	outermost CSS-grid container	grid-container	main or body > main
figure	captioned image container	image	figure

[Benjamin Hall]

@adynathos That can work, but I'd like to get them used to associating CSS with classes. For one, it's easier to teach simple selectors than complex ones, for another you run into odd precedence rules when you mix selector types. Even if it's a bit more verbose on the HTML end, I'd rather them be explicit so that they can see the connection between the class attribute and the selector. Otherwise it's just magic incantations.

If they're used to just using the tag name as the selector, they often have issues when they want to customize that p tag (but not any of the others). Redundant class names solve that and inheritance issues (to a large degree).

One particular issue with figures is that there are really two types of figure elements in use on their pages most of the time. There's a pre-written slider module that uses figures, and then there are the static captioned pictures. Those need very different styling, so referring to it by the tag name means extra work.

These are soft preferences, so I can be persuaded otherwise.

[ben_lubar]

@adynathos said in Suggest CSS class names for beginner whitelist:

navbar

There's already a <nav> tag in HTML5.

<nav>: The Navigation Section element - HTML: HyperText Markup Language | MDN

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

[Benjamin Hall]

@ben_lubar I guess I've seen it with varying implementation (especially in Mobile Safari). I'll have to look at it again.