SAP UI5 CSS Best Practices

 

CSS
1.	Rule Specificity	Organize the stylesheet in top down structure as per the rule specificity.
2.	Structure	Structure CSS in the selectors right to left. Browser while resolving CSS selectors, parses it from right to left.
3.	Compressed CSS	Always try to keep CSS as compact and precise as possible, we can also use compressed CSS file.   Avoid using multiple properties which can be replaced by single property.
4.	CSS Classes	If multiple elements share same properties always try to combine them by using classes.
5.	CSS Comments	Always use comments as much as you can in CSS file for complex applications.
6.	Efficiency	-        ID's are the most efficient, Universal are the least.   -        The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.
7.	Selector	-        Keep the selector short. Most of the time extra item in the selector will mess up the code.   -        Avoid using universal selectors.
8.	Stylesheet Size	Always keep the size of stylesheet as less as possible, it will help browser during the style resolution step. Remove unwanted selectors, avoid duplicate css and use tools like uncss to make sure stylesheet contain css that is being used in the page.
9.	CSS Expressions	Avoid CSS Expressions since they are deprecated started with IE version 8.