Clarification Required (CSS): Customizing Modern Site Pages

%3CLINGO-SUB%20id%3D%22lingo-sub-2018126%22%20slang%3D%22en-US%22%3EClarification%20Required%20(CSS)%3A%20Customizing%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2018126%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3ETo%20customize%20the%20look%20and%20feel%20of%20the%20site%2C%20we%20made%20use%20of%20classes%20provided%20by%20SharePoint%20modern%20pages%20(eg%3A%26nbsp%3BCanvasSection-xl8%2C%20CanvasSection%2C%20etc.).%20But%20soon%2C%20there%20was%20an%20update%20in%20SharePoint's%20CSS%2C%20due%20to%20which%20we%20had%20to%20rewrite%20our%20custom%20CSS%2FJS.%3C%2FP%3E%3CP%3ECan%20anyone%20please%20let%20us%20know%20which%20classes%20are%20not%20likely%20to%20be%20changed%20in%20the%20future%2C%20since%20it%20is%20not%20documented%20anywhere%3F%20Also%2C%20there%20is%20a%26nbsp%3Bdata-automation-id%20attribute%26nbsp%3Bthat%20is%20present%20in%20the%20DOM%2C%20can%20we%20use%20that%20or%20that%20too%20can%20change%3F%3C%2FP%3E%3CP%3EAny%20suggestions%20or%20information%20is%20highly%20appreciated.%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2018126%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2018323%22%20slang%3D%22en-US%22%3ERe%3A%20Clarification%20Required%20(CSS)%3A%20Customizing%20Modern%20Site%20Pages%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2018323%22%20slang%3D%22en-US%22%3EUnfortunately%20you%20are%20not%20going%20to%20find%20a%20clear%20answer%20for%20this%20ask%20%3A-(.%20Microsoft%20makes%20the%20kind%20of%20changes%20you%20mention%20here%20without%20further%20notice%20and%20that%20ends%20on%20breaking%20custom%20code%20that%20rely%20in%20the%20DOM%3C%2FLINGO-BODY%3E
Frequent Visitor

Hi,

To customize the look and feel of the site, we made use of classes provided by SharePoint modern pages (eg: CanvasSection-xl8, CanvasSection, etc.). But soon, there was an update in SharePoint's CSS, due to which we had to rewrite our custom CSS/JS.

Can anyone please let us know which classes are not likely to be changed in the future, since it is not documented anywhere? Also, there is a data-automation-id attribute that is present in the DOM, can we use that or that too can change?

Any suggestions or information is highly appreciated.

Thanks

1 Reply
Unfortunately you are not going to find a clear answer for this ask :-(. Microsoft makes the kind of changes you mention here without further notice and that ends on breaking custom code that rely in the DOM