Убирать модификаторы скрытия, а не добавлять модификаторы показа

Вот представим. Вы верстаете. И есть штука, которая должна показаться/скрываться по клику на какой-либо элемент. Не модалка, а клик-подсказки или кнопка-меню.

Конструкция, упрощённо (но обязательно с aria-атрибутами!), такая:

<!-- контрол -->
<button class="ui-button"
        type="button"
        id="ui-menu"
        aria-haspopup="true"
        aria-expanded="false">
  Добавить в...
</button>

<!-- 
    нечто, что реагирует на действие 
    с контролом. и оно скрыто
-->
<ul class="ui-menu is-hidden"
    aria-labelledby="ui-menu">
  Меню с пунктами...
</ul>

И вот самое важное как раз в классе is-hidden.

Исходим всегда из того, что в начальном состоянии элемент всегда скрыт. А действие с контролом — его показывает.

Нужно удалять модификатор скрытия, а не добавлять модификатор показа.

$(document).ready(function()
{
  $('.ui-button')
    .on('click', function () 
  {
    $('.ui-menu')
      .removeClass('is-hidden');
  });
});

Разметка — чище. Из разметки сразу понятно базовое состояние «всё скрыто». Проще дебажить.

Стили также пишутся исходя из мысли, что элемент всегда виден, а модификатор — скрывает. С анимацией там или ещё с чем угодно.

.ui-menu {
  opacity: 1;
  visibility: visible;

  // скрывалка
  &.is-hidden {
    opacity: 0;
    visibility: hidden;
  }
}