search

c0bra / svelma

Bulma components for Svelte
https://c0bra.github.io/svelma
MIT License
538 stars 43 forks source link

suggestion: Component scoped Styling #26

Open OmG3r opened 5 years ago

OmG3r commented 5 years ago

Hello, I would like to ask/suggest why not make the styling scoped just for the component rather than importing the whole Bulma css file. making the styling scoped will be more useful for implementing one component of Svelma. Currently using Svelma would imply using all of Bulma built-in css styles (mainly css which targets HTML elements: body, h1, html will give developers a headache)

c0bra commented 5 years ago

I've thought about this, but it also creates the opposite pain for consumers who want to use Bulma to style their entire app. They would have duplicated styles coming from Svelma that would have to be processed to remove the duplicates if they're importing all of Bulma elsewhere.

I'm open to a solution that doesn't create pains for both sides.

OmG3r commented 5 years ago

A solution i would suggest is dividing the CSS while writing, at start you have the original Bulma CSS file.

First, we would create a CSS file which will contain simple classes (mainly animation key frames and color stylings) and non-generic classnames (will not include "title" and "container" for example). Afterwards, remove these stylings from the original Bulma CSS file.

Also, remove component specific stylings from the original Bulma CSS file and include then within the component.

after doing this process we would wind up with 2 CSS files: one that has the simple non-intrusive CSS (keyframes and color) and another CSS file which will include the remainder of the stylings of Bulma (HTML element specific and generic classes).

combined ( simple CSS file + remainder of stylings + component specific CSS) we would have decomposed Bulma into componenet specific CSS and HTML element specific CSS.

shoud a developer want to use only components styling he would import only the simple CSS class. shoud a developer want to use all of Bulma styling he would import both the simple CSS file and the file that includes the remainder of the CSS.

I think this solution would solve the issue at hand. Thought it would be a hassle to decompose the whole CSS file element by element but this would dramatically improve developers experience.

c0bra commented 5 years ago

Sounds like an awful lot of work. Maybe once the core components are all added we can look at doing this; or if someone wants to take it on themselves I'm for it.