Some common questions we get from customers surrounding Salesforce Lightning include:
Can you make a stylesheet that can be reused for each component?
Can you use our stylesheet from our website?
And the short answer to these questions is Lightning Development is different from VisualForce Development. CSS doesn’t always work in the same way that you’d expect. To understand why let’s take a look at each question individually.
Can you make a stylesheet that can be reused for each component?
In most cases, you’ll be able to use the one that Salesforce already provides. It’s called the SLDS and if you’re developing components for standard Salesforce pages, you should use it.
When do you have to write custom CSS?
If you’re developing a custom or branded Lightning application, that’s when it makes sense to write custom css .
Why you shouldn’t write a single css file
In Visual Force pages, we have the familiar html and css making up a page.
In Salesforce Lightning, you actually don’t want to do this. Why? Rather than building one global stylesheet that components get styling from, you want to isolate styles to their components and prevent global rules. Each component essentially has it’s own style sheet. So building a page with Lightning would actually look like this.
This might seem silly and inconvenient, and if components only had htmland css , that would be true. But in practice, components actually can contain a mix of html , css , and other components.
A global stylesheet in this case would get very confusing and wouldn’t cascade well. So rather than asking for a css stylesheet, you should be asking for styling defined on the component level.
In fact, a sign of a poor quality codebase is when there is only a single component for an entire page. Chances are it was not architected properly if that’s the case.
Can you use our stylesheet from our website?
Properly developed lightning can use the styling from a website. For reasons we saw earlier, it should not use the actual style sheet.
A more important question here comes from a User Interface/Experience perspective. Do you want the component to look like your website or Salesforce?
Typically websites and branding will change, so unless your component will be customer facing, it should probably use the SLDS and look like Salesforce. As long as you build the component properly, this will minimize the maintenance time you will have to account for when using custom Lightning code.
When to make the component look like your website:
If you’re building for communities, lightning out, or some other customer facing code.
If you’re building functionality that is directly tied your website or web app and you want to give your users a visual cue that they are taking action related to your third party site.
When to make the component look like Salesforce:
When you’re going to use the component on standard lightning pages.
When you’re building components for Mobile
This is just a shortlist, but should give you an idea of when and where to use each. One of the things we aim for at Eigen X is a proper software development mindset that balances customer requirements. Developing for VisualForce and for Lightning are two entirely different mindsets, so it is an adjustment for many developers, admins, and even sometimes customers.
If you’re new to the Lightning ecosystem check out Thinking in Lightning or feel free to reach out to us with any questions on here, Twitter, or through email at info@eigenx.com.