What's difference between "attributes", "title_attributes", and "content_attributes"? Is there any difference between writing CSS classes directly to Html tags and using the Attribute class?

Is there any difference between attributes, title_attributes, and content_attributes? What is the usage of each of them?

I read Using attributes in templates, but it doesn't explain that clearly.
This depends on the template you use. If you use for example the node template

node.html.twig

&lt;article{{ attributes }}&gt;

  {{ title_prefix }}
  {% if not page %}
    &lt;h2{{ title_attributes }}&gt;
      &lt;a href="{{ url }}" rel="bookmark"&gt;{{ label }}&lt;/a&gt;
    &lt;/h2&gt;
  {% endif %}
  {{ title_suffix }}

  {% if display_submitted %}
    &lt;footer&gt;
      {{ author_picture }}
      &lt;div{{ author_attributes }}&gt;
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      &lt;/div&gt;
    &lt;/footer&gt;
  {% endif %}

  &lt;div{{ content_attributes }}&gt;
    {{ content }}
  &lt;/div&gt;

&lt;/article&gt;


You have four attributes variables


attributes
title_attributes
author_attributes
content_attributes


The difference between them is that they have different targets in the html markup of the template. The main attributes variable in a node is for the &lt;article&gt; tag, in a form for the &lt;form&gt; tag or in other templates often a simple wrapper &lt;div&gt;. If a template defines additional attributes variables they are for that specific part of the template, in a node for the title, author and content.

Always add attributes to the existing variable like explained in the linked documentation. Never replace it with your own attributes, because a lot of code depends on that the template is actually using the attributes variables.