NX WP Theme

CSS: How to work with styling

nxcode

Introduction

In this theme works with SCSS files and BEM methodology it is very important to keep these to rules strict in order to have clean code and uniformity. There is also an agility to include your css files easily in every case so we don’t have all css everywhere, thus making it very lightweight for every page we the whole website.

SCSS develpoment

In this theme we work with SCSS files A and need a SASS compiler to create the css files. To do so we should create a folder structure as viewed below

In production websites or where informed the SASS compiler is in the pipeline of the code deployment flow. This means that for deployment you don’t need to add the css files or a compiler.

When we work locally we need to create a compile the scss files that we are working on. In order to do so we need to create a package.json file in the root of the nx-theme-child directory with the contents below:

{
  "name": "sass.nxtheme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "scss": "sass --style=compressed --watch assets/scss:assets/css --load-path=node_modules",
    "build": "sass --style=compressed assets/scss:assets/css --load-path=node_modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bulma": "^1.0.2",
    "sass": "^1.77.8"
  }
}

Next step is to run npm install and when the compiler is installed (node_modules directory will be created), we can then use the command npm run scss in the nx-theme-child root directory. Now we are setup whenever we make a change in scss file it generates the css files in the specific folder.

CSS Rules inclusion for any case

As mentioned above we can easily include the rules we need for any case in our project, either form the parent or the child theme.

In the functions.php file or any included file in there, we can include css rule like below: 

function add_child_theme_css( $css_array ) {

    // included everywhere
    $css_array[] = 'header-child';
    $css_array[] = 'footer-child';
    $css_array[] = 'helpers-child';

    // included in single
    if ( is_single() ) {
        $css_array[] = 'single-child';
        $currentCat  = get_the_category()[ 0 ];
        if ( $currentCat->cat_name === 'Podcasts' ) {
            $css_array[] = 'components/podcasts-single';
        }
        $blog_sections = get_post_meta(get_the_ID(), "ap_sections", true);
        if ( $blog_sections && count($blog_sections) > 0 ) {
            $css_array[] = 'components/liveblog';
        }
    }
  
    // included in home
    if ( is_front_page() ) {
        $css_array[] = 'front-page';
    }
    
    // included in pages
    if ( is_page() ) {
        $css_array[] = 'page-child';
    }

    // included in archive
    if ( is_archive()) {
        $css_array[] = 'archive-child';
    }

    // included in specific category
    if ( is_category('podcast') ) {
        $css_array[] = 'category-podcast';
    }

    // included in search
    if ( is_search() ) {
        $css_array[] = 'search-child';
    }

    // included in author page
    if ( is_author() ) {
        $css_array[] = 'author-child';
    }

    // included in 404 page
    if ( is_404() ) {
        $css_array[] = '404-child';
    }

    return $css_array;
}

add_filter('css_array', 'add_child_theme_css');

BEM CSS methodology

BEM (Block, Element, Modifier) is a CSS methodology that helps create reusable, scalable, and maintainable styles. It structures CSS classes in a hierarchical and readable manner.

BEM Naming Convention

BEM consists of three parts:

  1. Block – A standalone entity that is meaningful on its own.
  2. Element – A part of a block that has no standalone meaning.
  3. Modifier – A flag that changes the appearance or behavior of a block or element.
BEM Syntax
.block {
  /* Base styles for the block */
}

.block__element {
  /* Styles for the element inside the block */
}

.block--modifier {
  /* Styles for a modified version of the block */
}

.block__element--modifier {
  /* Styles for a modified version of the element */
}
Example: A Button Component

  
  



.block{
  display:flex;

  &__button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    
    &--primary {
      background-color: blue;
      color: white;
    }
    &--secondary {
      background-color: red;
      color: white;
    }
  }
}