Pro Tips: Don't Script When You Can Style
Tags: css, html, animations, cssanimations
Published: 2019-11-18 20:10:06

---
title: Pro Tips: Don't Script When You Can Style
published: true
description: 
tags: CSS, HTML, Animations, CSS Animations
---

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)_](https://hackernoon.com/the-best-practices-for-a-great-developer-experience-dx-9036834382b0) in mind, and are often a more attractive option. I have to admit, I’d much rather implement an [_Angular Material Table_](https://material.angular.io/components/table/overview) than look up [_HTML Table Element_](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) 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_](https://www.polymer-project.org/)), we don’t forfeit the responsibility of fundamental expertise, or considering [_performance_](https://developer.mozilla.org/en-US/docs/Learn/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_](https://medium.com/front-end-weekly/what-is-a-view-in-web-application-6a2836eed4eb), 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_](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers), as you can with a one-line CSS [_display_](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property, or a CSS [_pseudo-class_](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).

One example of this is [_Angular Structural Directives_](https://angular.io/guide/structural-directives) like [_NgIf_](https://angular.io/guide/template-syntax#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:

```html
<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_](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts) behind the scenes that powers the NgIf structural directive. Don't forget it's also written in [_TypeScript_](https://www.typescriptlang.org/), 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_](https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/), you don’t need to add extra JavaScript on top of the API call. You can use the [_empty pseudo-class selector_](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty). 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:

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

![Unordered List Broken](https://i.imgur.com/XJwXQMX.png)

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

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

Here is what the user will see:

![Unordered List Fixed](https://i.imgur.com/7dQYy3A.png)

[_Chris Bicardi_](https://egghead.io/instructors/chris-biscardi) offers a short lesson on [_egghead.io_](https://egghead.io/) that highlights the intricacies of the [_pseudo-class_](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), and shows you how to achieve this [_here_](https://egghead.io/lessons/css-the-empty-pseudo-selector-gotchas?pl=css-tips-and-tricks-5d10e708).

Another great example of this is the addition, and removal, of components like tooltips from the [_DOM_](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), using JavaScript methods like [_MouseOver_](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event).

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_](https://material.angular.io/components/tooltip/overview) allowing for delay, change in positioning and custom classes. Did you know they’re also available as [_HTML title attributes_](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)? The tooltip in this code will be displayed when the user hovers over the label:

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

![Title Tooltip](https://i.imgur.com/4hLbU0p.gif)

You can also create your own tooltip as shown in the [_W3Schools_](https://www.w3schools.com/howto/howto_css_tooltip.asp) posting here. I especially like the design of this HTML/CSS-only tooltip in this [_codepen_](https://codepen.io/cbracco/pen/qzukg). 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_](https://www.cuelogic.com/blog/software-component-reusability) to match your application. The main takeaway should be to ask yourself whether or not you need to physically remove element from the [_DOM_](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model). 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_](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).

Libraries such as [_scrollmagic.io_](http://scrollmagic.io/) provide us with the ability for smoother and brighter scroll transitions such as anchor link scrolling, which you can demo [_here_](http://scrollmagic.io/examples/advanced/anchor_link_scrolling.html#bottom). The [_JavaScript Element Web API_](https://developer.mozilla.org/en-US/docs/Web/API/Element) provides us with the [_scrollIntoView_](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method, which allows us to bring an [_element_](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) into the view of the user. You can see an example of the method in use [_here_](https://codepen.io/ronhook/pen/bZdyRz).

With a minimal amount of CSS code, you can write [_keyframes_](https://developer.mozilla.org/en-US/docs/Web/CSS/@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_](https://developer.mozilla.org/en-US/docs/Web/CSS/animation). If you’d like to see keyframes in action, check out this [_demo_](https://www.impressivewebs.com/demo-files/css3-animated-scene/).

Animations have become such sought-after experiences, that many of the popular frameworks have included their own libraries for them. [_Angular Animations_](https://angular.io/guide/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_](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule), import animation functions separately in the files you need them, and then add corresponding [_metadata properties_](https://www.code-sample.com/2018/04/ngmodule-metadata-properties.html). If you’re doing all of this to trigger an animation on [_MouseOver_](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event) of an element, be aware that you can avoid the library, and JavaScript completely, by using the [_hover pseudo-selector_](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover).

It’s possible to make the argument that using the [_Angular Animations library_](https://angular.io/guide/animations) 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_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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_](https://greensock.com/js/speed.html).

The world of web development is experiencing a renaissance period thanks to the introduction of libraries and [_tooling_](https://www.valuecoders.com/blog/technology-and-apps/top-15-front-end-development-tools-2019/).
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._