1

Background

The Lightning Design System shows the CSS classes you can use for a finite number of scenarios.

The problem

I don't like this. I prefer being able to understand what is actually being applied and what specific classes are doing. I've found that several scenarios provide me the same exact appearance when I remove one of the classes in the Lightning Design System example. This makes me think the CSS I'm adding is not minimalistic.

For example, what if a complicated Salesforce CSS class has everything I want EXCEPT one style makes it unusuable for my use-case.

Some speculation

Is Salesforce intentionally hiding the styles being applied? You can use Browser tools to inspect, but that can be tedious.

Is the general expectation that the developer uses Browser HTML/CSS inspection tools to uncover the underlying styles? Perhaps the styles can change frequently, requiring them to be kept in sync in any documentation, when you could just use inspection tools to find the ".some-salesforce-class" in the CSS panel.

Where I'm coming from

I'm new to front-end development, so perhaps I am misunderstanding the philosophy of Browser UI development. If so, please help me understand better.

CSS styling can be frustrating for a minimalist who has a background in low-level programming in high-performance systems.

Request

There seems to be different expectations/philosophies involved in front-end development (e.g. ones that promote creative-expression). Please provide answers in a way that suggest these principles to help build my understanding of front-end development.

Any help, tips for a UI newbie, or insights would be appreciated, thank you.

1 Answer 1

4

The point of CSS styles in a framework is that you don't have to remember what specific things the styles do. Things like Bootstrap and SLDS provide a consistent user interface without knowing the specifics. It also allows customization so that you can change the classes and apply those changes consistently across the platform. It also allows salesforce.com to update the styles and developers don't have to keep track of those changes; they'll automatically apply to the entire project (e.g. when they added the various "spacing" themes to change how much space appears between components). You're free to download the source and examine what each style does. There's no need to use the browser inspector to find the classes; you just need the source code and the SLDS documentation to match things up.

2
  • I suppose that means it is a good idea to not mix your own styles with a framework's? Or else it seems highly possible that a change to the framework's styling can conflict with your other styles. This sounds like it can get complicated. - Thanks for the source code link! I didn't realize that was available.
    – Brandon
    Commented Jul 23, 2020 at 16:20
  • 1
    @BJCloud Ideally, you should only use framework styles and not custom styles. However, sometimes that's unavoidable (e.g. you need a special font color or something), in which case, you should document those and review them periodically. The entire point of SLDS is to make an app that looks like Salesforce, so if you use custom styles, your UI may no longer look like Salesforce. This may not be important for your own private apps, but if you want to list on AppExchange, it's better to follow guidelines.
    – sfdcfox
    Commented Jul 23, 2020 at 16:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .