I need a UI framework

I'm old enough to remember a time before UI frameworks. It was terrible.

Before I tell you kids to get off my lawn, I want to discuss a few points brought up in the article You might not need a CSS framework.

When ideals meet reality

Some people believe it is a best practice to use a framework, especially those just beginning front-end development.

For me it has been the other way around. I favored a DIY approach until I got a paying job and worked on commercial projects. I realized why front-end developers need proper tools. We don't get paid to do the same thing over and over. We don't have the time or the energy to master every single aspect of web development. We barely have enough time to cover the most common platforms and use cases when testing.

Most people believe it will make development faster. And this may be true in the initial stages of a project. But this gain may be followed at the expense of technical debt…

Web projects often get passed from person to person. I've found that it's much faster and easier to continue someone's work if they've used a UI framework. I'm tempted to say that the same can be achieved by writing extensible code from scratch, but for the reasons mentioned above, it's just not going to happen.

Too many classes or too many selectors?

[T]here is a tendency to use very specific selectors to create the CSS rules. […] What happens if you need to override some of the properties of your <th>? Then you need to create an even more specific selector! You can't just get away with creating a generic rule like: th.important-heading { color: #000; }

Most frameworks have helper classes for that. Why would someone need a class called important-heading? Headings are by nature important. If one is more important than another of the same level, it should be marked in some other way. Bootstrap's documentation points out that a CSS class does not convey meaning. Even though it's not their job to educate developers. Or is it? Maybe it is. With power comes responsibility and all that.

I find these classes redundant, since I like to use only the classes I deem necessary. If that were my code, I would probably only have a class label-warning.

What if someone needs to add a custom label? If no base class is provided, they have to either duplicate all CSS or add another selector to an already long list of selectors.
Instead of something like .brand-pink or .brand-primary, you could end up with:

.button,
.button.secondary:hover,
header .slogan .title,
header .slogan a .fa,
.sticky.is-stuck,
footer ul a,
footer .latest a,
#company,
#newsletter .fa,
.clients span,
.slider figcaption span {
	color: pink;
}

Which brings us to another common complaint: verbosity. I made that mistake in the beginning. Why .text-center? Why not just .center? Before making a fool of myself by saying it out loud, I realized that it only centers inline elements. Does .brand-primary change foreground color or background color? You probably need to change both. So you'll probably end up with .brand-primary-fg and .brand-primary-bg.

Ironically, each element in the example created for the article has a class when the same could easily have been achieved with no classes at all. The second aside can be targeted with .row aside ~ aside or .row aside:last-of-type. But that's just a demo. Here's a quick sketch of an actual website:

Layout for large devices
Layout for medium devices
Layout for small devices

Whose job is it to educate developers?

There's usually a way to cut down on redundant classes and elements. It may mean losing some of the benefits of a UI framework, but depending on the project, it may not matter. This is the default form row markup for Bootstrap 3:

<div class="form-group">
	<label class="control-label" for="contact-email">Email</label>
	<input id="contact-email" class="form-control" type="email" name="email">
</div>

I've trimmed it down a bit for my CMS. With a few extra lines of CSS it looks identical.

<label class="form-group">Email
	<input class="form-control" type="email" name="email">
</label>
label {
	display: block;
}

.form-control {
	display: block;
	margin-top: 5px;
}

The benefit of having a dedicated class for form fields is that you don't have to target all possible types when applying custom styles. Checkboxes and radio buttons cannot be styled the same way as textareas, selects and inputs of type text, email, password etc.

Here's what I believe is the standard way of creating a multi-column layout:

<div class="container">
	<div class="row">
		<div class="col-md-6">
			<figure>
			</figure>
		</div>
	</div>
</div>

The same can be achieved with much less markup:

<div class="container">
	<figure class="col-md-6">
	</figure>
</div>

Who designs websites?

A lot of developers just want to release something and they don't have a designer available for their project. CSS frameworks provide a basic design developers can use. While this is useful, the consequence is that your site or app ends up looking like every other recent site on the Internet –but whether that impacts your project is up to you to decide.

Imagine what those websites would've looked like if the developers had designed them. Actually, you don't have to imagine. You can see for yourself.

A UI framework is not the same thing as a WordPress template. It has very little say on design choices. If all websites look the same, you can blame designers. Or a lack thereof.

A UI framework is also not an extension of anyone's personality. It's just another tool. Not that the author suggests that. They raise many good points, but any developer with a year or two of work experience should already have considered all of them.

Comments