Styling conflicts with HTML element

[jordnz]

Using custom styled pre tags breaks astrum's pre tag styles, not sure if you can do much about that.

I've added a class to my pre tags and used that as the selector in css, not ideal as it's not how I'll be selecting it in production but it works just as well

[RyanHavoc]

@prolax Could you link us to an example of the issue you're having?

[jordnz]

@RyanHavoc I'm using "pre" tags in my component library, but as you can see have had to add a class to the tags so I don't have any styling conflicts with the "pre" tags being used as part of Astrum.

If there was a class added to Astrum's "pre" tags then Astrum could select just those "pre" tags instead of styling the default element.

Hope that makes sense.. :)

[RyanHavoc]

@prolax We've resolved this in the latest release 1.5.15. You shouldn't need to set a class now.

[giuseppeg]

Hi @RyanHavoc I am considering to give astrum a try but I was wondering how do you folks deal with conflicting css rules?

What happens if my pattern library has something like * { margin: 0 } or other resets?

Is there any chance to sandbox the examples either by loading markup.html in an iframe or using ShadowDOM?

[RyanHavoc]

Hi @giuseppeg. All Astrum elements are prefixed with '.ndpl-' to avoid conflicting with your project styles. It's generally considered bad practice to use '*' for resetting (for this very reason, you're too easily prone to conflicts and it's not a very efficial way to reset styles), consider using something like normalize.css which targets specific elements rather than using a wildcard.

[giuseppeg]

@RyanHavoc fair enough, for clarity I know that it is a not recommended practice I just want to bring up one of the many ways to break things even when you use BEM.

Anyway the reason why I asked is because I saw that pages' selectors target elements but now I realised that pages are just for documentation.

Initially I thought that one could display components in pages as well – in fact I would love to be able to prototype pages to show things to product managers, designers etc. I think that it would be fairly easy to add this feature. If you like this idea I would be happy to file a new issue or even implement it.

[RyanHavoc]

@giuseppeg it would be great if you could create a separate Proposal issue and elaborate on how to envisage this feature working in more detail.

[davidhund]

One (IMO better) way to fix these style collisions would be to render patterns in an iframe and only load project (not Atrum) CSS there. This would also allow for better Responsivene previewing. See also #71 and #79