Search Unity

Why BEM for CSS class names?

Discussion in 'UI Toolkit' started by Stardog, Feb 28, 2019.

  1. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,913
    Is it just the performance concerns?

    RSCSS:
    Code (csharp):
    1. .signup-form
    2. .signup-form .input
    3. .signup-form .submit
    4. .signup-form .submit .-wide
    BEM:
    Code (csharp):
    1. .signupform
    2. .signupform__input
    3. .signupform__submit
    4. .signupform__submit--wide
    If nesting is supported, RSCSS is even simpler:
    Code (csharp):
    1. .signup-form {
    2.     .input { }
    3.     .submit {
    4.         &.-wide { }
    5.     }
    6. }
     
    Stardog, Feb 28, 2019
    #1

  2. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    331
    We wanted a good convention for our style sheets and we believe BEM is well suited.

    Although it's possible BEM is quicker in browsers, I don't know if would be the same in UI Elements.
     
    benoitd_unity, Mar 8, 2019
    #2

  3. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    780
    While it wasn't the main motivation it's true that complex selectors have a runtime cost that we do not optimize for at the moment (whereas web browsers typically employ specific tricks for this situation).

    Also since we do not natively support rule nesting like SCSS the advantages aren't as obvious (though long term this would be interesting).
     
    antoine-unity, Mar 11, 2019
    #3