How to tell what filename to select when using twig debugging in drupal 8 theming this is my second week with drupal 8 (or drupal in general). I want to be a drupal developer and contributer to the modules and themes community. However, I am a little lost with the file name suggestions shown in this image.


When reading books and tutorials, i see the author suggesting we use one of the filename suggestions shown, but how do you know which one to select?
So like in that list, the author switched from the default selected which is the last one, to the second from top. What criteria did he use to determine which is best? Thanks in advance.
It depends on how specific you want to get. If you made a template for block.html.twig it would effect every block. block--system.html.twig would effect all of the system blocks, and block--system-branding-block.html.twig would effect the every branding-block subset of the system-block. And block--octo-branding.html.twig could possibly be every block that is using the octo-branding block plugin.  

I'm not positive what template is what in your case since I don't know what is named what in your theme and plugins, but that's my best guess. Regardless the rule of thumb is it goes from most specific to most broad in order. And Drupal will use whatever template is most specific that applies in every case. For example.

I have a basic page located at /node/18.
Near the top it says

&lt;!-- FILE NAME SUGGESTIONS:
   * page--node--18.html.twig
   * page--node.html.twig
   x page.html.twig--&gt;


If I made a template for page.html.twig, it would load that template for every page. If I made a template for page--node.html.twig it would use that template for every page for nodes. If I made a page--node--18.html.twig it would use that template only for that specific node. If I've already made any combination of those templates Drupal will use the most specific one.