In past, when I was new in the Salesforce Development Field. I didn’t know too much about the lightning components and about Styling of it. When I got My First project in which I had to make a Shopping cart under the Salesforce community. For designing and Styling, I was using Inline CSS in Auro Components because I thought it may be best options for getting the better results under salesforce development but I was wrong there are many designing issues which were not overcome only by the CSS.
As, after depth research, I found these Auro components are editable as it is the feature given by the Salesforce itself. In Components, we have the edit mode in which we can edit it and can do anything according to the requirements. There is a left panel in the editor of the components which is named as Stylesheet in which all editing is done and every class under it is named as a (.this) file name and one component is equal to one class and all components are always presented under the Lightning Application which we had developed. But there is also a small problem if we have 50 components in the application then it means we have 50 different classes under which if we want to make any change we need to make in all 50 classes which may increase our workload.To solve this problem, we have a token system which make it easy to overcome this type of problem.
Salesforce Token System
In the Token System, the data is always saved in (.token) file name under the Lightning Design System. In this, we have the advantage to declare the variable which we are going to add in every class, let me show you an example. Let us assume that we consider a variable called “A” we gave it color Black and consider another variable “B” we gave it color Red. Now, We make changes in different classes by adding these variables where we need Black color and where we need Red color.
Here is the code by which you can declare the variable with different changes.
(Variable Use Like: <aura:token name=”A” value=”color:Black”/>)
(Variable Use Like: <aura:token name=”B” value=”color:Red”/>)
It makes it easy to make changes in any class with which we are compatible to do work in a fast and easy manner without any useless labour work. This Token System is also recommended by the Salesforce to use it in the designing issues. If you have fewer classes then you can make changes manually but if you have many classes of the lightning app then you should use the Salesforce Tokens System to make different changes in the app components and classes.