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?


  • Discourse touched me in a no-no place

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


  • Fake News

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



  • @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?


  • area_pol

    @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


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



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


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.