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.

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

• Create reusable styles with CSS classes.

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

  view raw ReusableStylesWithCSSClasses.css hosted with ❤ by GitHub
• Use shorthand properties where possible.

  	/* 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;
  	}

  view raw UseShorthandProperties.css hosted with ❤ by GitHub
• Use a CSS reset stylesheet.
• Make your CSS readable, add comments, and validate it.
• Use a CSS preprocessor.
• Compress the CSS for production.

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.

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

  view raw DoNotUseImportantRules.css hosted with ❤ by GitHub
• Do not use type selector, ID selector, or combinators (>, +, ~).

  	/* 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;
  	}

  view raw DoNotUseTypeSelector.css hosted with ❤ by GitHub
• Do not use selectors with higher specificity and do not use unnecessary selectors.

  	/* 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;
  	}

  view raw DoNotUseUnnecessarySelectors.css hosted with ❤ by GitHub
• Do not mix tag names with ID or class name.

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

  view raw DoNotMixTagNamesWithID.css hosted with ❤ by GitHub
• Do not declare the same CSS rule repeatedly.

  	/* 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;
  	}

  view raw DoNotRepeatCSSRules.css hosted with ❤ by GitHub
• Do not use the same selector repetitively.

  	/* 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
  	}

  view raw DoNotRepeatSelectors.css hosted with ❤ by GitHub
• Avoid using inline styles.

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

  view raw AvoidInlineStyles.html hosted with ❤ by GitHub