Naming convention + element customization

[kedrzu]

Overview of the problem

This is about the Bulma CSS framework

Description

I love the simplicity of Bulma coming with a great value as well.

However when developing some bigger app with Bulma I find it difficult to get sticked to its naming convention. Short class names are great for the sake of simplicity, however when having some more customized views, bigger components, along with using SPA framework is troubling.

I need to mix Bulma default components with some custom CSS, sometimes struggling with old fashioned CSS problem, that is curse of specificity, not being able to determine which rule is working and which not, when there is 3 levels of nesting.

Also it's quite hard to mix Bulma with some opinionated CSS naming conventions like BEM, SMACSS, made to be easy scallable.

Also there is no easy way to have a new component that is a slightly modified Bulma component, with some custom css, like custom tabs or panels. There is of course a possibility to add some modifier to change how component looks, however this goes with problem of untrackable specificity, and one must hack some nested rules or sprinkle some !important here and there to have this working.

Proposal

Maybe components should be defined as a "recipe", like function or mixin that creates a component with custom naming conventions (like custom prefixes, super-tabs for instance).

Standard components would be just these mixins included with standard names. One would be thereafter able to create as many copies of components as he likes, modifying it to fit his design needs.

[kwynns]

just came across this, but I wonder if a generator would work for this?

I actually really like this idea and might give it a shot. Using a cli, it would start off with a menu system asking what path you'd like to save to, then if you want to create a new element or component. Then show a list of what you selected, then you select one and it asks for a name. It generates the file and sticks it in whatever path you designated.

I haven't dived in to their naming conventions much, but I'd see if I can BEMify it in the process.

[jgthms]

Been thinking about this a lot. I wish I could provide this in an easy way, kind of like this:

// Flag to determine if we output the CSS of this file
// Defaults to a global $output value set to true
$hero-output: $output !default

=hero
  align-items: stretch
  display: flex
  flex-direction: column
  justify-content: space-between
  // More styles

// If the flag is true, we output the CSS within the .hero selector
@if $hero-output
  .hero
    +hero

It could even accept a classname as parameter:

=hero($className)
  .#{$className}
    align-items: stretch
    // More styles

@if $hero-output
  +hero("hero")

Now this could be fairly easy to implement, although it would require a lot of refactoring.

But the issue is with class combinations like .hero .navbar or .hero .title, which you can see in the source code: https://github.com/jgthms/bulma/blob/master/sass/layout/hero.sass

Each of these classes would already have their own mixin:

=navbar($className)

=title($className)

// etc.

Because within the .hero declaration block, there's mentions of .navbar and .title, their classnames need to be variable as well.

So we would need more parameters:

=hero($className, $navbarName, $titleName…)

That way you could choose the same classname for .title that you used when calling +title somewhere else:

+title("my-title")

+hero("my-hero", "my-navbar", "my-title")

I'm just wondering how it would work with CSS Modules. If you call +hero in a hero.module.sass file, the .title inside would have a different scope than the one in title.module.sass in which you call +title.