@vikramvi
Posted
Thanks for sharing your project, it looks simply amazing.
I've looked into the GH repo and have below doubts, please clarify
- What's the reference for this structure of css ? components directly and breaking down into individual components Usually all the styling is done in single file style.css
Please clarify your philosophy behind this practice ?
- I didn't understand below in page.css &__main { &__footer {
are inside .page class, how does that work ? Any reference please
- What's this particular naming convention ? page__main, card__container etc
@annaindistress
Posted
@vikramvi Hello, thanks for the feedback!
I'm using the BEM methodology in which each component has its own style file.
This is not correct CSS, but similar to how we split styles for components in SCSS.
To build a working version I'm using the Gulp task "styles", in which PostCSS assembles from different components a common CSS file.
You can see on the gh-pages branch how it looks after the build.
@vikramvi
Posted
@annaindistress Thanks for detailed reply.
Is it necessary to use SCSS, PostCSS, Gulp etc along with BEM methodology ?
I'm currently using only plain CSS and would like to try out BEM
@annaindistress
Posted
@vikramvi You don't have to. You can use BEM in the regular CSS as well. It will look something like this:
.block { ... }
.block__element { ... }
@vikramvi
Posted
@annaindistress Thanks for quick clarification, do you use any "BEM validator" to make sure you're following BEM properly and to catch any mistakes ?
@annaindistress
Posted
@vikramvi No, I just check myself with the specs and articles if I have doubts
@vikramvi
Posted
@annaindistress Thanks for updates, I have pinged you over slack FM channel; please check and reply back.
