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

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

Конструкция, упрощённо (но обязательно с 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>
          <!-- контрол -->
<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');  });});
          $(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;  }}
          .ui-menu {
  opacity: 1;
  visibility: visible;

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

        
        
          
        
      

Ещё всяких ссылок про то, как скрывать/показывать элементы