Styling guidelines

It is important for end-users to have quick and responsive websites. This improves your business metrics, such as engagement, retention, and conversion. Using fast and reliable CSS contributes to creating appealing sites.

In this article, you will learn essential practices to help you create fast websites. Additionally, you will learn about patterns that negatively affect the speed of your sites. These patterns and practices are generic and you can use them everywhere.

RECOMMENDATION: We recommend getting familiar with the documentation of the Bootstrap theming guide before starting work on your theme. For more information, see Theming Bootstrap on the Bootstrap site.

Good CSS practices

We recommend following these practices when creating your Sitefinity CMS websites.

• Create reusable styles with CSS classes.
  CSS

  /* Good practice: */
  .field-wrapper {
    border: 1px solid #f00;
  }
  
  /* Bad practice: */
  #username-wrapper {
    border-width: 1px;
    border-style: solid;
    border-color: red
  }

• Use shorthand properties where possible.
  CSS

  /* Good practice: */
  .card {
    margin: 10px 20px 30px 40px;
  }
  
  /* Bad practice: */
  .card {
    margin-top: 10px;
  }
  .card {
    margin-right: 20px;
  }
  .card {
    margin-bottom: 30px;
  }
  .card {
    margin-left: 40px;
  }

• Use a CSS reset stylesheet.
• Make your CSS readable, add comments, and validate it.
• Use a CSS preprocessor.
• Compress the CSS for production.

CSS practices to avoid

The following CSS code patterns may impact your sites negatively. We recommend using the provided alternatives instead.

IMPORTANT: These CSS patterns may result in CSS leaking in the New content editor.

• Do not use !important rules, especially on element type selectors.
  CSS

  /* Bad practice: */
  input {
    border: 1px solid #ffee00 !important;
  }
  
  /* Alternative: Use Class selectors: */
  .form-text-input {
    border: 1px solid #ffee00;
  }

• Do not use type selector, ID selector, or combinators (>, +, ~).
  CSS

  /* Bad practice: */
  a {
    font-family: Arial, san-serif;
  }
  div#username-wrapper {
    font-family: Arial, san-serif;
  }
  div + div {
    font-family: Arial, san-serif;
  }
  
  /* Alternative: Use Class selectors: */
  .card {
    font-family: Arial, san-serif;
  }

• Do not use selectors with higher specificity and do not use unnecessary selectors.
  CSS

  /* Bad practice: */
  div#main .section div + div .card {
    color: red;
  }
  
  /* Alternative: Keep specificity low and avoid unnecessary selectors; use CSS modifier classes selectors when appropriate: */
  .card {
    color: #f0f;
  }
  .card.-danger {
    color: #f00;
  }

• Do not mix tag names with ID or class name.
  CSS

  /* Bad practice: */
  div#main div.section div + div a {
    color: red;
  }
  
  /* Alternative: Use Class selectors: */
  .card-link {
    color: #f00
  }

• Do not declare the same CSS rule repeatedly.
  CSS

  /* Bad practice: */
  h1 {
    font-family: Arial, san-serif;
  }
  h2 {
    font-family: Arial, san-serif;
  }
  h3 {
    font-family: Arial, san-serif;
  }
  
  /* Alternative: Group or combine CSS selectors that apply the same CSS rules: */
  h1, h2, h3 {
    font-family: Arial, san-serif;
  }

• Do not use the same selector repetitively.
  CSS

  /* Bad practice: */
  .card {
    font-family: Arial, san-serif;
  }
  .card {
    color: #f00;
  }
  
  /* Alternative: Combine the same selectors in one declaration block: */
  .card {
    font-family: Arial, san-serif;
    color: #f00
  }

• Avoid using inline styles.
  HTML

  <!-- Bad practice: -->
  <div style=”border: 1 px solid red”></div>
  
  <!-- Alternative: Use Class selectors: -->
  <div class=”card”></div>