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
    Commented Sep 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.