How do I add classes to main menu ul and li in Drupal 8 I want to generate the html elements and their classes to fit my styling of the main menu.  

I'm confused by all the near-possibilities offered in the api documentation and by looking at core themes etc. and still can't quite see what I have to do, or where I have to do it.
I would be very grateful for clear pointers to:  


which php functions I have to write; 
which variables I need to add / update; 
in which files the functions will go.


Presumably, in MYTHEME.theme I will need a preprocess function of some sort to add to the attributes and item.attributes variables that links.html.twig uses to print the menu ul and the menu item li's. 

[Update]
So far I have discovered one way to place classes on the Main Menu's ul but ideally I would like to add a class to each submenu's ul indicating the depth of the sub-menu.
And I cannot locate any documentation or examples from which I can understand the generation / modifying of the main menu's individual link items.  

This function goes into the file  MYTHEME.theme.

function MYTHEME_preprocess_page(&amp;$variables) {

  // Pass the main menu and secondary menu to the template as render arrays.
  if (!empty($variables['main_menu'])) {
    $variables['main_menu']['#attributes']['id'] = 'main-menu-links';
    $variables['main_menu']['#attributes']['class'] = array('links', 'clearfix', 'MYNEW_class');
  }

}
Override the twig file for the main menu by saving menu--main.html.twig to your theme. Copy the original menu.html.twig from /core/modules/system/templates/menu.html.twig or /core/themes/classy/templates/navigation/menu.html.twig if your theme extends from Classy.

You can then modify the Twig macro used to generate the menu output. To get a class on the ul's to indicate level, you could do this:

{% if menu_level == 0 %}
  &lt;ul{{ attributes.addClass('menu', 'menu-level--' ~ menu_level) }}&gt;
{% else %}
  &lt;ul class="menu {{ 'menu-level--' ~ menu_level }}"&gt;
{% endif %}


You could do similar manipulations to the li's:

&lt;li{{ item.attributes }}&gt;

Just tack on .addClass('class-name') to attributes like so:

&lt;li{{ item.attributes.addClass('class-name') }}&gt;

If you're a HTML/class name snob like myself you can also remove classes like so:
{{ item.attributes.removeClass('menu-item') }}

Which I did on the line above the li in the for loop.