0

What I want to achieve is developing a theme using the best WordPress CSS standards. How to create a robust and logic class naming system based on the one that already is in use in twenties theme ? It looks like class names are changing from a theme to another.

I've already found these two resources :

  1. CSS Coding Standards : how to write CSS correctly and following WordPress rules.
  2. CSS Native Classes : basically, the list of class name already used in WordPress.

What I need now is a system to add new class name. Does a kind of CSS naming library exist ? Or a tutorial that show how to properly name my new classes in a way every theme WordPress developer will understand immediately ?

The more I read the codex, the less I understand the global logic.

1
  • The codex is there for historical reasons, you should focus on the handbooks instead on the official developer docs site
    – Tom J Nowell
    CommentedSep 16, 2021 at 11:28

1 Answer 1

0

The more I read the codex, the less I understand the global logic.

That's because there is no global logic. The system you are trying to understand simply does not exist.

CSS classes are just CSS classes, the naming scheme itself doesn't confer special abilities, and most of the HTML classes WordPress uses are there for historical reasons or chosen by a contributor a long time ago. I think you're reading more into the CSS class names than you should.

Some HTML classes are used for content to indicate alignment, and there are blocks that have classes you can match against to style, likewise with the body and post classes, but wether you use them or not is up to you as a frontend developer. There's no structured system that needs to be followed.

You might find hints of one in the default themes, but this is specific to those individual themes. It's usually because the people who wrote them preferred a particular style, not because WordPress provides or requires one.

The closest to a systematic naming system can be found in two places:

  • The CSS variable names that core added very recently
  • Gutenberg block editor components

In those cases, knowing the patterns used is only useful if you intend to modify core itself, or override one of those variables. Gutenberg uses a BEM style class naming scheme internally, but you are under no obligation to follow it, and the rest of core doesn't either.

On the frontend, style the classes WP provides, otherwise use whatever class naming system you prefer.

If you're asking because you're writing a plugin that exposes frontend items, then it doesn't matter. Be internally consistent with whatever you choose, but keep in mind it is your choice.

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.