GET IN TOUCH
+91-62843-00850
+1-732-668-8002
info@penthara.com
LOCATIONS
India
SCO 670, Third Floor
Sector 70, Mohali
Punjab, 160055
USA
651 North Broad Street
Suite 206
Middletown, DE 19709
Follow Us on Social -
02.08.2021

Major pitfalls to avoid while working with CSS in SPFx Solutions

CATEGORIES:
SHARE THIS BLOG:

When building SharePoint Framework solutions, you can use CSS to define how your customization should look and behave. When building SharePoint customizations using CSS, you can change the layout of the page.

Microsoft itself has its own recommendations for working with CSS in SharePoint Framework solutions which you should read from here.

Sometimes when working on SharePoint Framework projects you have a need to use third-party libraries with their own CSS styles. You can include CSS styles using different techniques:

How to include your own CSS BAD practice

     1. Via import statement right in your code

import "./index.scss";

     2. Using dynamic loading with SPComponentLoader

This package is part of the SharePoint Framework, which is a collection of NPM packages that empower developers to create client-side experiences for Microsoft SharePoint.

SPComponentLoader.loadCss(this.context.pageContext.site.absoluteUrl + 'FilePath.css');

However, some CSS libraries have very common selectors, which affects HTML in the "outside world". By outside world, we mean the parent structure and classes above the SPFx webpart component.

For example, a library might include a CSS style for an element with Class = “hello-world". This class might also be in SharePoint out-of-the-box styles which can break the existing UI.

Building better solutions in SPFx

So, a developer should take some time to plan their CSS classes before implementing. Here are some minor things you should prefer before you begin with your implementation.

Avoid using ID in markup

Using SharePoint Framework, you build customizations that end-users add to SharePoint. It's impossible to tell upfront if the particular customization is used only once on a page or if there are multiple instances of it. ID’s are meant to be unique on a page and if a user adds your webpart on page twice it will lead to errors. So always use classes instead of Ids.

Wrap your CSS styles in a class named after the component

Use root as a name for your top-level tag. The only thing that we need to make sure is that the surrounding div uses a unique class name and all my styles are defined beneath that class name. This prevents overriding of same classes on different web page and to also debug the code properly.

<div id="main-page">
  <p> This is the main landing page </p>
</div>
Integrate Office UI Fabric

Office UI fabric which is a collection of CSS classes and Sass mixins that give you access to the colors, animations, fonts, icons, and grid of the Fluent Design Language.

Scope CSS class names for your own Safety

Controlling scope is something you probably do not tend to consider when working with CSS and Sass. The Block, Element, Modifier methodology (commonly known as BEM) is a popular naming convention for classes in HTML and CSS. BEM brings a system approach in your project and keeps it from getting messy.

<button class="button">
     Normal button
</button>
<button class="button button--state-success">
     Success button
</button>
<button class="button button--state-danger">
     Danger button
</button>
Do not use tag selectors or use them in extremely rare cases

Having a “parent selector” in CSS is mentioned regularly as something CSS could really use. By using your own class instead of directly targeting a child with tag is a far easy approach. This prevents targeting the same tag in a different component, as tags should be used in very rare circumstances.

<div class="intro">
  <p>My name is Donald.</p>
  <p>I live in Duckburd.</p>
</div>

And using class=”intro” in CSS as below

Good Practice

.intro{
  background-color: yellow;
}

Bad Practice

div p{
  background-color: yellow;
}
Avoid using too much Media Queries

Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control. Fortunately, it no longer matters the size of the devices that are coming in the future because we’re already prepared for them with our flexible grids, flexible images, and content focused breakpoints.

Written By
Nivedietta
Nivedietta Singh
Web Developer
peer reviewed By
JAsjit Chopra
chief executive officer
Graphics designed By
sanika sanaye
Creative Design Director
Recommended Content

Email Insights

Get the latest updates from Penthara right in your mail box.
Sign Up

LinkedIn Newsletter

Monthly updates, news & events from Microsoft to help  your business grow.
Subscribe To Newsletter

Leave a Reply

Your email address will not be published.

More From This Category

Working with People Picker in Power Apps for SharePoint

Learn how to master People Picker columns in SharePoint from the Power Apps canvas app. In this blog post, you will find detailed step-by-step instructions on creating, updating, and clearing People Picker columns for single and multi-user setups in SharePoint.

Read More
Bringing back Incoming Email to SharePoint Online document library using Power Automate

This article will help achieve the erstwhile incoming email functionality using Power Automate, aka flows from specific domains. The flow can handle multiple attachments and special characters in the subject line. In addition, it includes failure notifications at multiple stages.

Read More
Creating reminder Adaptive cards in Microsoft Teams for upcoming events from a SharePoint calendar list

Learn how to create an Adaptive Card in Power Automate that posts a summary of upcoming events like Birthdays, Work Anniversaries and Holidays to an MS Teams Channel. The source of these events is the SharePoint legacy calendar app. Advanced Dynamic JSON Adaptive Card implementation has been covered extensively in this example.

Read More
1 2 3