10 Pitfalls to avoid while working with CSS in Spfx Solutions with text

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

1.  Via import statement right in your code

2. Using dynamic loading with SPComponentLoader

import ".index.scss";

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 Duckburg.</p>

</div>

And using class=”intro” in CSS as below

Bad Practice

Good Practice

.intro {

    background-color: yellow;

}

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.

Nivedietta

Written By-  Nivedietta Singh

(Web Developer)

Written By-  Nivedietta Singh

(Web Developer)

Jasjit

Peer Reviewed By-  Jasjit Chopra

(CEO)

Peer Reviewed By-  Jasjit Chopra

(CEO)

Sanika

Graphics Designed By- Sanika Sanaye

(Creative Design Director)

Graphics Designed By- Sanika Sanaye

(Creative Graphic Designer Trainee)

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Connect with us

>