CSS/Sass Structure for SalesForce B2B

Some tips for dealing with styles on bigger projects.

SalesForce B2B Projects can get pretty big really fast. It's good to start off on the right foot and set up your theme build the best way possible to be both scalable and modular so you don't get lost in a mess as the build grows. Here's some helpful advice on how to accomplish that.

When dealing with SalesForce B2B themes, it's usually a good rule of thumb to use a Sass compiler to build all of your styles since the we're usually dealing with multiple pages and components across a highly customized front-end.

One of the biggest benefits of using CSS pre-processors in our case is the improved syntax. SASS allows you to use a nested syntax, which is code contained within another piece of code that performs a wider function. Nesting allows a cleaner way of targeting elements. In other words, you can nest your HTML elements by using CSS selectors and it allows for a much more component-based structure.

The Setup

Sass should be kept as simple as it can be, especially on bigger projects. We should avoid building complex systems unless absolutely necessary. So our setup on a new project is incredibly important. And it all starts with our file structure.
The 7-1 pattern (7 folders, 1 file) is fairly popular for larger projects. It accommodates everything required to make our sass files modular, maintainable, and able to scale. A typical 7-1 sass architecture specifies a theme folder. However, In B2B, our theme is already specified from the level above the sass structure, so a theme folder is not necessary. So we'll use a 6-1 sass architecture.

• abstracts/
• vendors/
• base/
• layout/
• components/
• pages/

And our main file for the @imports: main.scss or styles.scss
The order above should be the order of your imports in the main file to ensure everything fires in the properly.

Now let’s break down the purpose of each folder with respect to Salesforce B2B.

Abstracts

These are all global variables, functions, and mixins used across the project. The names for the partials should reflect that. 

• _variables.scss
• _mixins.scss
• _functions.scss

Vendors

The vendors folder is reserved for any css from 3rd party libraries and frameworks, most importantly for B2B will be Bootstrap and jQueryUI. Each one can reside in their own partial unless they need to be broken down further which you may find useful in the case of Bootstrap.

• _bootstrap.scss
• _jquery-ui.scss

Base

The base folder is where we will put project-wide typography rules, animations, and utilities. Here we can define how to display specific HTML elements across the project to give us a good starting point. And because base loads after Bootstrap, it's a great place to define general Bootstrap overrides.

• _base.scss
• _reset.scss
• _typography.scss

Layout

The purpose of the Layout folder will be for site-wide specific layout features and components. This will be the place to style your headers and footers. You can also use it for navigation elements and forms and layout components like cards and modals.

• _header.scss
• _footer.scss
• _modals.scss
• _forms.scss
• _navigation.scss

Pages

Here's where we can finally start hooking up our Visualforce files. Pages should correspond to the specific visualforce pages within the site. Home page, Product List page, Product Display page, Cart, Checkout, even custom subscriber pages. This will be where to put styles that are specific to these pages.

• _product-list.scss
• _product-display.scss
• _home.scss
• _my-account.scss
• _cart.scss
• _checkout.scss
• _contact-us.scss

Components

To get even more granular, we can break down the specific components that make up a page. Considering the amount of view templates that can go into a single page, we tend to use this a lot. It also makes it easier for us to recycle custom components that we've built or heavily modified.

• _addressbook-view.scss

• _breadcrumbs.scss

• _carousel.scss

• _locale-switcher.scss

• _myorders-view.scss

It is so very important to START with a good structure when working on larger projects because it's much more difficult to go back later and rebuild/restructure your styles. Mostly because it's hard to trace down what class names were used for and where after they've been thrown into a few or just a single file. You'll have a lot less headaches. There are no right or wrong ways to structure. Use ideas like this and modify them to however you feel would benefit your SF B2B project the most. And by all means, use all the helpful sass tools to make life easier, but avoid making things complicated. While it may be fun to work lots of magic, the main purpose of sass is to make your life easier. Happy coding!

For more on sass guidelines, go here: https://sass-guidelin.es/