Pro Tips: Don't Script When You Can Style

The world of web development continues to make incredible strides in producing new technologies to better serve our users, and modernize web application development.

New tools and libraries are developed with developer experience (DX) in mind, and are often a more attractive option. I have to admit, I’d much rather implement an Angular Material Table than look up HTML Table Element rules one more time!

They’re also worth learning in order to sharpen your skillset, and stay ahead of the curve. The fact still remains that when we adopt frameworks and UI libraries (see: Bootstrap, Google Polymer), we don’t forfeit the responsibility of fundamental expertise, or considering performance for our users.

It’s easy to lose sight of the fact that a large part of our job as Front-End Developers is to inform the browser of the layout of the page. It’s also easy to revisit the basics! Give yourself a moment to take stock of your current practices in order to see if they can be replaced with any simpler, or safer solutions.

Our reliance on frameworks, libraries, and in some cases, languages, can be simplified by getting down to our roots - HTML & CSS. I’ve identified two major areas of UI development that have CSS-only solutions, allowing for safer, cleaner, and faster code structure and animations.

Structure

Application structures, and their views, are often based on conditionally rendered elements. This has become easier to accomplish with what is available to us, out-of-the-box, using popular frameworks. You can just as easily build or manipulate the UI with logical checks, and event handlers, as you can with a one-line CSS display property, or a CSS pseudo-class.

One example of this is Angular Structural Directives like NgIf. NgIf works by binding to a condition expression, and will add or remove the element it controls based on its truthy or falsy value. Here's an example of NgIf in action here:

<div *ngIf="likesPuppies">
  <a href="http://place-puppy.com/">Puppy Pics!</a>
</div>

<div *ngIf="likesKittens">
  <a href="https://placekitten.com/">Kitten Pics</a>
</div>

You can see, from this example, that it's incredibly easy to implement - all you need is an attribute with a boolean condition to show a link to kitten or puppy pictures, depending on the user's preferences. What you don't see is the ~100 lines of source code behind the scenes that powers the NgIf structural directive. Don't forget it's also written in TypeScript, so that logic will also need to be transpiled for the browser to read it. If you need to show or hide a div based on a JavaScript value, you'll still need to use some JavaScript to do it. In this instance, you can opt to use the display property instead, and avoid the framework altogether.

If you’re only showing an element based on whether or not a value is returned from an API, you don’t need to add extra JavaScript on top of the API call. You can use the empty pseudo-class selector. This selector can be used to refer to any elements which don’t contain children or content.

If our API has been designed to store lots of data, and return whatever is available, the front-end of our application will need to cater to this response. In this example, I am showing a statically created list of items that represents a potential API response with a missing value:

<ul>
  <li>Pens</li>
  <li>Pencils</li>
  <li></li>
  <li>Paper</li>
</ul>

Utilizing the empty pseudo-class selector will allow us to remove the empty list item from the user's view. Here's the code:

li:empty {
  list-style-type: none;
}

Here is what the user will see:

Chris Bicardi offers a short lesson on egghead.io that highlights the intricacies of the pseudo-class, and shows you how to achieve this here.

Another great example of this is the addition, and removal, of components like tooltips from the DOM, using JavaScript methods like MouseOver.

Tooltips are an intuitive way to make your application more informative and you don’t need JavaScript to use them! Angular provides a highly configurable Material Design tooltip allowing for delay, change in positioning and custom classes. Did you know they’re also available as HTML title attributes? The tooltip in this code will be displayed when the user hovers over the label:

<label for="name" title="User's First Name">Name</label>
<input type="text" name="name" id="name">

You can also create your own tooltip as shown in the W3Schools posting here. I especially like the design of this HTML/CSS-only tooltip in this codepen. These frameworks do offer more choice, but if the job doesn’t call for it, you may be adding a lot more code unnecessarily.

There’s a good time to consider JavaScript when developing for components like tooltips, especially if they’re a central feature for a view or you’re building a reusable component to match your application. The main takeaway should be to ask yourself whether or not you need to physically remove element from the DOM. If one line of CSS can replace your reliance on a library, it may be worth considering.

Animations

Animations are a popular development technique because they make applications more fun, responsive and intuitive. Transitions offer a more sophisticated interaction with our user - the click of a button shows a ripple effect, and you slide to the next element.

It’s hard to imagine how we ever survived the jarring experience of changing views instantaneously using anchor tags.

Libraries such as scrollmagic.io provide us with the ability for smoother and brighter scroll transitions such as anchor link scrolling, which you can demo here. The JavaScript Element Web API provides us with the scrollIntoView method, which allows us to bring an element into the view of the user. You can see an example of the method in use here.

With a minimal amount of CSS code, you can write keyframes for the same experience! You are only required to define your keyframe from and to states, and then reference your keyframe in your CSS animation property. If you’d like to see keyframes in action, check out this demo.

Animations have become such sought-after experiences, that many of the popular frameworks have included their own libraries for them. Angular Animations is a powerful library that of allows the developer to control robust transitions, and rich experiences.

It uses JavaScript to control the triggers, timing, and display of content. The ability to do this requires a function that calls one or more other functions. If you want to use Angular Animations, you’ll need to import the Browser Animations Module, import animation functions separately in the files you need them, and then add corresponding metadata properties. If you’re doing all of this to trigger an animation on MouseOver of an element, be aware that you can avoid the library, and JavaScript completely, by using the hover pseudo-selector.

It’s possible to make the argument that using the Angular Animations library could be a better alternative to writing animation logic because it uses the Web Animations API, which doesn’t use JavaScript to change CSS properties.

JavaScript is a more powerful solution to creating animations. It introduces the possibility of things CSS can't do, for example: pausing and reversing an animation. My advice is to err on the side of CSS, and use caution when developing animations, unless the design calls for a technically complex solution. Take solace in the safety of CSS.

An overridden, misinterpreted, or incorrect CSS rule can cause issues with user experience in the same way a JavaScript error does, but won’t prevent your application from loading or operating functionally. More often than not, CSS animations are more performant as well.

If you’d like to measure the performance difference between a particular CSS animation, and one which uses the Web Animations API, you can test them here.

The world of web development is experiencing a renaissance period thanks to the introduction of libraries and tooling.
Frameworks make it much easier to rely heavily on JavaScript by providing easy-to-use APIs that structure, style, and animate our applications. Implementation is easy, and the design of the components is stunning.

I’ve built many applications using them and am incredibly thankful they exist. Their usability significantly reduces the time it requires to get a project functionally, and visually, complete.

I do, however, believe that they can remove us from maintaining institutional knowledge of our own applications, and there are simpler ways to achieve what the design calls for.

I hope this has ignited a passion inside of you for what you can do with simple CSS!

If you have any other techniques you’d like to share, please do so in the comments!

This Dot Inc. is a consulting company which contains two branches : the media stream and labs stream. This Dot Media is the portion responsible for keeping developers up to date with advancements in the web platform. In order to inform authors of new releases or changes made to frameworks/libraries, events are hosted, and videos, articles, & podcasts are published. Meanwhile, This Dot Labs provides teams with web platform expertise using methods such as mentoring and training.