Reasonable System for CSS Stylesheet Structure

Re:Reasonable System for CSS Stylesheet Structure by ilikescience on Tuesday November 03, 2015 @11:27AM (#10500587)

I like how readable it is, but nesting selectors:

  .parent .child .element {

is bad for performance — thus BEM's:

  .parent--child__element {

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by MatekCopatek on Tuesday November 03, 2015 @11:48AM (#10500735)

It's not as bad because of decreased performance (which is negligible) as it is because of increased specificity, which has bigger day-to-day implications in large apps.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by atirip on Tuesday November 03, 2015 @11:45AM (#10500711)

That information is outdated. CSS speed optimisation is a complete waste of time for at least 5 years now.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by onion2k on Tuesday November 03, 2015 @12:02PM (#10500831)

If your CSS performance is slow then you certainly have some terrible UX problems as well. You can't fill up the DOM to the extent that the browser slows down when it's rendering things and still have a usable website.

Fix the UX and the CSS performance will magically fix itself.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by Raphmedia on Tuesday November 03, 2015 @11:31AM (#10500615)

But that would require you to modify the markup.

It would also stops you from having general styles declarations.

You couldn't do .button{color:red;border: 1px solid white;} and then .box>.button{width:100%;} unless you make your markup <span class="button pricebox--box__button"> and that would be pretty ugly, wouldn't it?

Correct me if I am wrong.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by armandososa on Tuesday November 03, 2015 @01:32PM (#10501517)

In this case it's

    .parent>.child>.element.

[ Parent | on HN ]

Re:Reasonable System for CSS Stylesheet Structure by elros on Tuesday November 03, 2015 @01:28PM (#10501482)

Don't you mean

    .parent__child-element {

?

[ Parent | on HN ]