Why are custom styles divided into types when they're all just CSS classes?

The types allow for the styles to be grouped when displayed within the WYSIWYG editor and in the Custom style drop-downs in the elements.

When you create a Custom style you must first select a type. For example, Heading, Paragraph, Layout etc. These "types" are simply categories for the Custom styles. They don't actually effect the CSS classes.

The types allow the Custom styles to be more easily managed within the Style builder. For example, the default content in the Style preview and the default Style editor form is based on the "type" of style you want to create.

The types also allow Custom styles to be grouped when displayed within the WYSIWYG editor. This makes it much easier to locate and apply a Custom style to your content.

The types also determine which Customs styles are displayed within the Custom style drop-down found in the Site Studio elements. The styles shown in the drop-down are filtered to the type that is relevant to the Site Studio element. For example, only Paragraph custom styles and Generic custom styles are shown in the drop-down in the Site Studio paragraph element. This makes it much easier to find and apply Custom styles to Site Studio elements. 

The types are there for ease of use. If you don't want to use the types, simply make all your Customs styles use the Generic type.