HTML IDs are now randomized for AJAX responses

Starting with Drupal 7 Drupal ensured that there are no duplicated HTML IDs on the page. While it worked fine it added a gigantic overhead
to AJAX requests because:

• a) All the existing HTML IDs needed to be sent with it
• b) due to that the AJAX requests needed to be POST.

Instead from Drupal 8 on, HTML IDs returned fromAJAX requests will be randomized (suffixed with a hash).

For forms there is an automatically added additional attribute: data-drupal-selector corresponding to the element id before randomization.
This means that you need to change your CSS selectors in CSS/JS:

Before

jQuery('#edit-field-bar')

#edit-field-bar {
}

After

jQuery('[data-drupal-selector="edit-field-bar"]')

[data-drupal-selector="edit-field-bar"] {
}

Note:

While currently #id will still work for non-ajax responses, there are plans to possibly deprecate it and always add a random suffix. So if you use the above conversion as a best practice, you are already safe for the future.