Menu icon Foundation
Why doesn't Foundation use placeholder (or silent) selectors ?

They seem to have many advantages, to write semantic SCSS, to result in smaller compiled CSS and so on ...

Why have a default CSS compile several thousand lines long, if only a few classes are actually used ?

With placeholder selectors, this kind of situation could easily be avoided, while encouraging better coding techniques.

The core of Foundation could be based on those placeholder selectors, and maybe provide a few additional scss files in case someone wants to set presentational classes in their markup as it is now, or use a CSS-only build.

What is your point of view on that ?

https://speakerdeck.com/anotheruiguy/sass-3-dot-2-silent-classes

silentplaceholderselectorsextend

They seem to have many advantages, to write semantic SCSS, to result in smaller compiled CSS and so on ...

Why have a default CSS compile several thousand lines long, if only a few classes are actually used ?

With placeholder selectors, this kind of situation could easily be avoided, while encouraging better coding techniques.

The core of Foundation could be based on those placeholder selectors, and maybe provide a few additional scss files in case someone wants to set presentational classes in their markup as it is now, or use a CSS-only build.

What is your point of view on that ?

https://speakerdeck.com/anotheruiguy/sass-3-dot-2-silent-classes

Karl Ward over 5 years ago

From the perspective of a custom project, you are right it makes sense to keep placeholder selectors as far as they are useful, and if they are not going to be used directly in the html. But there are a few reasons this is not practical for the Foundation framework ...

Placeholder extendable class:

%something {
  border: 1px solid red;
}

Normal extendable class:

.something {
  border: 1px solid red;
}

In the above examples, BOTH can be used with @extend:

.myclass {
  @extend %something;
  // or ...
  @extend .something;
}

The only difference, is that %something cannot be used in a html element, while .something can ... Furthermore, if you are using a placeholder class, the only way to use it technically speaking, would be to @extend it into another class using SCSS, thus it does not necessarily save much space. It will of course save space if it would NOT be used. Mostly it is about semantics though ... If a specific class is NOT to be used directly in html (only to be extended), it should be a %placeholder ... If it IS to be used directly in html, then it needs to be a normal applicable class.

However, Foundation is a frontend framework, where these classes need to be available to use directly in the html without having to render your own classes with @extend. When writing html, we need to be able to use classes .hide-for-small, .small-12, .flex-video etc directly on our elements, without having to explicitly rendering each utility with @extend.

You are right that you should use placeholders for all your classes that will not be used directly in the html. If they might be used directly in the html though, you will need to render them as normal applicable classes with .dot-class notation.

Furthermore, you can disable Foundation SCSS on a per-element basis ... Only include what you must! Technically, your observation is correct, but for a frontend framework like Foundation, they need to make the classes visible and available to be added to html.

The entire Foundation CSS is 19.5kb compressed, perhaps not too unacceptable?
http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/css/foundation.min.css

Roy Hewitt almost 5 years ago

I disagree with the premise that "Foundation is a frontend framework, where these classes need to be available to use directly in the html without having to render your own classes with @extend." If you're adding style to an element shouldn't that be done with CSS rather than the HTML? Separating style front content to the point that it makes sense is a big win in my mind.

A front-end framwork, IMO, is a series of tools that lets you display styled content on a webpage. That doesn't mean you should be forced to use presentational classes in HTML. In fact, using placeholder classes makes things easier when you're forced to make changes to your design. Using proper semantic classes in HTML and extending them with presentational (placeholder) classes means that you have only one place to edit your code in response to a design change -- the (S)CSS, and not the HTML.

See:
http://thesassway.com/intermediate/understanding-placeholder-selectors
https://www.youtube.com/watch?v=Ckh_09hi94w&feature=youtu.be (start at 10:00 if you'd like)