WordPress WordPress Theme Development Working with CSS and JS in WordPress Themes Adding CSS to a Theme Via the functions.php File

CJ Williams
CJ Williams
33,033 Points

So, how would we structure our CSS directory and contained files if we were to use sass and the SMACSS architecture?

I am curious about building themes using SMACSS architecture. I really think this would help future-proof the current project I am working on. I've never experimented in a WP theme that uses sass, let alone SMACSS. Is this something that you see becoming a best practice for WP development, or would it be best to stick with basic CSS?

1 Answer

Kevin Korte
Kevin Korte
28,077 Points

Love using Sass with WP. And I'm a little familiar with SMACSS, enough to know you can use it's architecture with Sass, in a WP theme.

The basic structure, is that you have your SMACSS files as Sass partials, and than in one main Sass file, import all of your partials into, to basically generate one nice stylesheet.

How you compile your Sass could make a difference. I tend to use Grunt or Gulp to do so, and both allow me to take Sass file(s), compile them, and save them wherever as a new CSS file with a new name.

For instance my WP theme folder structure might be like (from the root of my theme)

style.css( file )

--dev (folder)

----sass(folder)

--------build.scss (file)

------------partials (folder)

----------------_module.scss (file)

----------------_layout.scss (file)

So with a folder structure like that, I import all of my partials into my build.scss file, compile it to css and save it as style.css in the process, and put it in the root directory. This makes WP happy, and this makes me happy.

Than during theme development, I never touch my style.css file, as it get's regenerated everytime I compile the Sass again.

CJ Williams
CJ Williams
33,033 Points

Thanks Kevin! Is there anything special you need to do the the config.rb file for the wordpress environment?

Kevin Korte
Kevin Korte
28,077 Points

No, I've yet to touch the config.rb file myself. But I have only ever compiled Sass using a Grunt or Gulp plugin to do so....so there may be some custom config if you're using Sass's own compiler. The configs for compiling Sass in Grunt and Gulp are all done in the Gruntfile.js or Gulpfile.js respectively.

CJ Williams
CJ Williams
33,033 Points

OK. I use Compass, so I imagine it's similar. I'll do some Googling to see if there are any special needs for Compass+WP. Thanks again Kevin! Cheers!