I have learned to code a WordPress theme these last couple of months, however, as I browse the internet to read the job description for a WordPress developer I could tell that there is still work to be done to be a professional web developer. Meantime, sharing what I learn is worth it, even if it will appear to be basic for some. Writing, this tech-related post, which is a form of teaching, will solidify my knowledge and maybe one day it will useful to other developers.
Pay attention to sibling and descendant relation
This requires formatting your HTML properly as poor formatting and indentation may lead to confusing siblings and descendants when writing CSS.
Even though this seems trivial, it leads to wasting time and energy. Below is a code snippet that exemplifies the issue.
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>></div>
<h2><?php the_title(); ?></h2>
<p class="meta">
Posted at
<?php the_time('F j, Y g: i a'); ?>
By
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
<?php the_category( ' ' ); ?>
</a>
</p>
You can clearly see from the first two lines that the <div> appears to be the parent of <h2>, and <p> the formatting was misleading (and also the fact that the closing </div> was farsighted as the first line is quite long). In fact, the <div>, <h2>, and <p> are all siblings. This led to writing a CSS rule that simply does not work.
In fact, I figured out the issue after switching the CSS combinators and doing some testing.
Below is an example of CSS combinators and how they combine selectors:
h2 p => all descendant combinator
h2 > p => only direct child combinator
h2 + p => adjacent sibling combinator
h2 ~ p => general sibling combinator
As I first used all descendant combinator it did not work. In the code shared above using the general sibling combinator ~ solved the issue.
Thus, as an essential rule of thumb carefully formatting your code should be done as you go thoroughly, and should not be left to be applied to the end of the project.
A simple lack of indentation that takes a second or two may lead to a proportionally large amount of time loss.
To improve your methodology when writing CSS there is another trick you can do which will save you lots of headaches which is the use of BEM.
BEM for WordPress
BEM is a popular CSS coding standard created by Yandex employees (Yandex is the most popular search engine in Russia).
It is simple to understand and to integrate into your HTML and CSS.
BEM stands for Block, Element, and Modifier. It relies on classes on for its components and it is based on containers/module that is to say “blocks”.
Since there is no clear convention for WordPress HTML class naming it is safe and more productive to use BEM as standard especially if you plan to release your WordPress product to the public that is WordPress.org or other marketplaces. As you need to cover the possible classes that the users can generate.
Let’s have a look at a code example that explains how BEM works:
<div class="blog">
<article class="blog__post">
<h2 class="blog--highlighted">
....
</h2>
</article>
</div>
Here blog is the Block.
__Post is the Element linked to the block blog.
Finally --highlighted is the Modifier.
You can see that every HTML node here is based on blog class which is the only Block of this example.
Below are CSS examples:
.blog {}
.blog__post {}
.blog--highlight {}
You can also have a CSS rule such as Block__Element--Modifier that combines both a Block, an Element, and a Modifier.
Why use BEM?
You gain more speed when writing your code as you have a clear convention to follow in all your project(s). Besides, your site will also load faster as you avoid nesting selectors when writing your CSS.
It provides scope to CSS using the Block as a container for Element and Modifier. Thus, the issue of inheritance related to CSS will be avoided.
BEM helps with specificity and makes the code neater and cleaner. This avoids confusing nested selectors that can go to many levels deep and of course. Nested selectors could push you to use !important tags and inline styles that are not best practices and will lead to a messy codebase that is hard to maintain.