· 2 min read

CSS Tips

Placeholder

Keep CSS and HTML to a minimum

  • CSS and HTML are every dependent. Remove unnecessary tags and CSS classes.
  • Lesser the CSS and HTML, easier it is to modify.

Use flex and grid for adjusting positions

Don’t use absolute lengths, use relative lengths

  • absolute lengths include cm, px, etc. relative lengths include em, cm, rem etc.
  • if a width or height need to be a certain character length use “ch”. This cannot be used for font-size
  • “vh” and “vw” can also be used but they are not perfect. instead use em or rem. rem is more preferred.
  • Resource: https://www.w3schools.com/CSSref/css_units.asp

Use CSS variables

For DevExpress, modify dx-widget property

  • .dx-widget class is applied to all DevExpress component so modifying it for changing something like font-size will effect every dx component.
  • For responsiveness, rely on CSS not JS.
  • Unless absolutely needed, JS should not be used to re-enforce responsiveness.

Media Queries

  • Assuming you are used most of the tips above, your CSS should be fairly small.
  • Now you can use media queries for modifying elements on specific screen sizes.
  • Before using media queries decide on the size of displays you want to support. This will make sure media query parameters is same across application.
  • Resource: https://www.youtube.com/watch?v=yU7jJ3NbPdA

Back to Blog