Suggest CSS class names for beginner whitelist
-
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?
-
@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.
-
@dkf I was thinking of having them use semantic tags (
<main>
/<article>
,<aside>
) for that, but yeah, I'll add those.
-
@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 thatI mean, you could say the same about
header
.
-
@heterodox yeah, true. I'll have them use both (so that they're mostly referring to class names in CSS rather than tag names).
-
@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?
-
@benjamin-hall
I do not think that every HTML element has to have a class.
For example, instead of putting anav-item
on everyli
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
orbody > 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
orbody > main
figure captioned image container image figure
-
@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
figure
s is that there are really two types offigure
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.
-
@adynathos said in Suggest CSS class names for beginner whitelist:
navbar
There's already a
<nav>
tag in HTML5.
-
@ben_lubar I guess I've seen it with varying implementation (especially in Mobile Safari). I'll have to look at it again.