Working with CSS

Drupal expects specific conventions when it comes to implementing CSS. Typically, CSS files go into a themename/css directory, but that’s not necessary. Drupal themes are free to use Sass, PostCSS, or other build processes as they see fit.

For the theme to load a CSS file, the file must be referenced from a library. Then, the library must be called from either the themename.info.yml file, attached in preprocess, attached within the template through the attach_library function, or loaded by a module.

Drupal core has a set of CSS standards that requires the use of block element modifier (BEM) architecture. Generally, this is best practice within all themes, but it isn’t required. In addition, many popular utility-based CSS frameworks such as Tailwind or Bootstrap negate the need for BEM.

The basics of BEM is that you give your component (aka a “block”) a name. In this case, the name will be a card. Then, any elements inside of that...