Tips for CSS in Components

Components must be set to 100% width

Because they can be moved to different locations on a Lightning page, components must not have a specific width nor a left or right margin. Components should take up 100% of whatever container they display in. Adding a left or right margin changes the width of a component and can break the layout of the page.

Don’t remove HTML elements from the flow of the document

Some CSS rules remove the HTML element from the flow of the document. For example:

1float: left;
2float: right;
3position: absolute;
4position: fixed;

Because they can be moved to different locations on the page as well as used on different pages entirely, components must rely on the normal document flow. Using floats and absolute or fixed positions breaks the layout of the page the component is on. Even if they don’t break the layout of the page you’re looking at, they will break the layout of some page the component can be put on.

Child elements shouldn’t be styled to be larger than the root element

The Lightning page maintains consistent spacing between components, and can’t do that if child elements are larger than the root element.

1<div style="height: 100px">
2  <div style="height: 200px">
3    <!--Other markup here-->
4  </div>
5</div>

1<!--Margin increases the element’s effective size-->
2<div style="height: 100px">
3  <div style="height: 100px margin: 10px">
4    <!--Other markup here-->
5  </div>
6</div>

Because components can be moved to different locations on the page, they must not have custom top or bottom padding or margin. The page maintains consistency between components; adding additional padding or margin to a component results in excessive spacing.