Why wp_enqueue_style() is adding CSS class?

Question

Why my stylesheet links are getting -css at the end? How can I remove that ?

I have this in my custom function file:

function enqueue_styles_scripts() {
  wp_enqueue_style('bootstrap', get_template_directory_uri() .'/css/vendor/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');

When I check the source this is the output:

<link rel='stylesheet' id='bootstrap-css'  href='//localhost:3000/wordpress/wp-content/themes/underscore/css/vendor/bootstrap.min.css?ver=4.4.1' type='text/css' media='all' />

Can you please explain why -css is getting added to the given id bootstrap ?

Answer 1

The suffix -css exists to prevent collisions with other elements on the site.

The elements needs some id so you can manipulate it later per JavaScript, so there has to be a predictable naming scheme.