CSS is currently not capable of scoping the design only to a component on a web page. It is just possible through different class names for elements on the page. To avoid the inference of same style sheet classes on the same page, SPFx post-fix every class name used in the web parts CSS files. There are also hidden gems that allow you to change this behaviour dynamically as required and sometime the class names shouldn’t be renamed at all cost. Enough about the theory lets take a closer more detailed look.
A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.
To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.
The new SharePoint Framework has a smart way to avoid conflicting CSS definitions. Therefore all style sheet classes will be post-fixed with a unique random string and converted to a JSON object. In your web part code, you can use the same class name as you used in your style sheets and the variable will be automatically replaced with the random class name string. So far the good parts of the SharePoint Framework.
In practice, this has some limitations and challenges.
The new SharePoint Framework has a safety net when you develop and style your components. Whenever you write a new style sheet class this will be picked up by a SASS preprocessor that first compiles the SASS file and then applies a special random string to the class name.
This should theoretically avoid that two web parts have conflicting style sheet classes. If one web part uses the style sheet class ‘item’ and another web part uses the same class name. The last web part embedded on the page will win the battle how the item should look like. Through this renaming you make sure that every web part has an individual definition of the item. In general this is a good behavior.
On the other hand, you have frameworks or Office UI Fabric where those classes won’t be renamed.
There are also some negative impacts caused by that method and there is also an easy way to disable this renaming of style sheet classes. If you do so, then you need to be aware of certain things on how to make your styles available exclusively just for your web part.
We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365. Also can share with you links where you can buy Mac Office, if you’re a fan of Apple (saveonit.com, etc).
Have you ever tried to add a caption to an image inside the SharePoint rich text editor? In this case you might end up editing the source code of the editor. Before you touch the source code of your page, let me show you a more convenient way to achieve this without advanced coding techniques.
As promised in my blog post “What is inside your SharePoint CSS” I like to show how it is possible to add a grid system to SharePoint without using Bootstrap or edit the master page.
Grid systems for web sites were popular long before Ethan Mascotte wrote his famous article about “Responsive Web Design” back in 2010. The first grid system I ever used was the 960.gs. It was released in 2008.
Over the last year I did more branding projects on Office 365 than on on-premise. Since the first call by Microsoft to avoid modifications of the master page I played around with certain scenarios and patterns to reduce or avoid such modifications.
One common issue is that the suite bar is responsive (everything that resize is responsive) but not well optimized for mobile. Without any enhancements this part of SharePoint shows only half of the content. With some small CSS only modifications the suite bar looks great on nearly any device.
The following blog post use SASS pre-processed CSS the compiled CSS can be found too at the end of this post.