• HTML Best practises
• CSS Best Practises
• BEM

Semantic elements are used so both browser and developer know their meaning.

• <article>
• <aside>
• <footer>
• <header>
• <main>
• <nav>
• <section>

Instead of using generic div containers, we should use these semantic elements for specific purposes

Like the <header> element can be used for displaying header, it just makes the HTML more readable.

Don’t place block-level element within inline elements

<span>
    <p>
    </p>
<span>

Here the <p> is block element which is inside <span> which is inline element, we should not put it this way.

• The block-level element cannot be nested inside an inline element.
• The inline element can be nested inside a block-level element.
• The inline and the block-level element can be nested inside the block-level element.

This is a standard of naming the css classes, so they are more readable and maintinable.

In BEM we name classes in this format

block__element--modifier

We should not use inline style, here are the reasons why.

• The inline styles have the highest specificity which makes it very hard to change the styles.
• The inline styles are sent from the HTML itsel, how’s the browser going to cache it.
• The HTML file will be large if we add the style in the HTML itself.
• Separation of concerns, HTML is for markup not styles, use .css file instead

Specificity is something that we should always keep in mind, we should always avoid overly specific selector.

We can add selective refresh to our widget, when using postMessage, we are writing code in js also in php for rendering the specific control or option, but using selective refresh we can write that in our php code only.

$wp_customize->selective_refresh->add_partial(
			'display_navigation',
			array(
				'selector'        => '.navigation.post-navigation',
				'render_callback' => function () {

					if ( get_theme_mod( 'display_navigation' ) ) {
						the_post_navigation();
					}
				},
			)
		);