A few questions about Skeleton

Question

I recently discovered this "boilerplate" and instantly fell in love with it, basically because it is simplistic, pretty lightweight and unlike other css frameworks, does not impact your design.

Looking at it's source code, though, it raises some questions, like for example this part here

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }

Like it isn't bad enough they use universal selectors with attributes, but they do it twice?

A few lines below I see this part

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }

Which could be inserted into the previous rule set I mentioned and avoid the double (or triple) universal selectors.

Here's another one

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

The clearfix utility class is missing :after.

Looking at their github page, the last update was about 7 months ago, so I suppose they will not be releasing any fixes.

I'm no CSS guru though, so I would like to ask if my suspicions are correct and ultimately, can you give me some names for other CSS frameworks that work the same way but aren't as poorly written?

Answer 1

Unfortunately, I believe you are a little bit misguided on your understanding of just about everything you've shown issue with here. Let's try to remedy that.

What is a universal selector?

The universal selector is the asterisk symbol: ( * )

The universal selector is a wildcard, really. It will match any element in its context. The universal selector has poor performance when nested, and it should be avoided in those situations.

One common use case you'll see is the global resetting of box-sizing.

*,
*::before,
*::after {
  box-sizing: border-box;
}

---

Selector grouping

Those first two groups are not universal selectors - they're just tag / attribute selectors, and they are perfectly performant. You'll note that they can't be merged into a single selector set because the second large group is slightly different: it is not targeting <select> elements.

This is because <select> elements are stupid, and should be left to the UA to deal with.

---

This selector set is more broad than the first two, considering there are all types of <input> elements that you might want to target with this, that weren't in the earlier grouping.

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }

The differences matter if you don't want to mix your styles, and overload the wrong things.

---

Clearfix

Finally, the clearfix.

These days, you usually include a micro clearfix directly on the element that needs it, by way of the ::after pseudo-element. It's pretty great.

However, before this was popular, you'd see clearfix elements. That's what the .u-cf class is for, although content becomes pointless.

body > div {
  background-color: #555;
}

.myFloat {
  margin: 10px;
  width: 50px;
  height: 50px;
  float: left;
  
  background-color: #aaa;
}

.u-cf {
  content: '';
  display: table;
  clear: both;
}

<div>
  <div class="myFloat"></div>
  <div class="myFloat"></div>
  <div class="myFloat"></div>
  <div class="u-cf"></div>
</div>