Thoughts On Organizing your LESS / SASS Styles

sage
1

One of the biggest benefits for front end development has been the use of module partials enabled by Sass and LESS.

I’m curious how everyone think about organizing their responsive styles.

Do you include all styles for a specific template in one partial?

For example _custom-post.scss contains all styles across all screen dimensions for that particular template.

Or do you use a _responsive.scss file that contains only the styles needed for small screens and up or vice versa (depending on whether you use mobile first design principles or not).

What’s your strategy and why?

2

If you are asking only for styles I would recommend you to use BEM/SUIT approach which is great because it helps to keep styles readable and easy to maintain. See: http://getbem.com/ or http://suitcss.github.io/
Instead of partials (for each page) you will have components (for each part of the page - component e.g. .Navbar, .Footer, .Title, etc.). All responsivity is described inside the component styles so there is no separate _responsive.scss file.

Sidenote:
As for the general ideas about a theme files structure I recently adapted modular strategy where every part of the page is a component (including page itself). This is an idea taken from BEM/SUIT but applied also for JS and HTML.

So I have a directory for every component and such directory has:

  • PHP files for component markup
  • JS files which describe possible interactions
  • SCSS files for styling

Advantages of this approach:

  • Easy reuse, component might be moved between different projects with only some minor modifications
  • Easy to maintain, modification of a component styles or scripts doesn’t affect other components
  • Works well with BEM (or SUIT) methodology
  • Force you to write highly modular code (which is generally a good thing to do)
  • Force you to have consistent naming strategy

Disadvantages:

  • Needs Sage building tools modification/reorganization if you want to have each component in the separate directory
  • Introduce some redundancy in CSS styles (might be mitigated with @mixins)

Example of simple component structure:

  • components/
    • Navbar/
      • index.php (markup)
      • index.js (how it interacts with user clicks)
      • index.scss (how it looks)
    • PageHome
      • index.php
      • index.scss
    • etc.

The approach described above is not fully tested but till now seems to be a good idea. I’ll definitely write something more after releasing more themes using it.

2 Likes