So, in my case, I have a list of boroughs and connected cities. The way it works here in Montreal is we have boroughs and connected cities(like Westmount; geographically-speaking, it's still on the island and an outsider would think it's a regular borough, but it's not..). So, it wouldn't make sense to use 2 dropdowns since they're pretty much the same, but I was wondering if it's bad practice to use dividers or subtitles inside a dropdown. And yeah,I watched that video called "F*ck dropdowns!" and I decided that a dropdown would be a good solution for this.
I don't think it's necessarily 'bad practice' to have subdivided selects (dropdowns). After all, there are specific HTML tags for select list subgroups so it's accessible too.
However, it is bad practice to have long select lists - they make things difficult to find and are physically difficult to use.
Almost any list that requires subgrouping is likely to be too long and that's where the problem lies. Yes, you can subgroup your list to make things easier to find but, in doing so, you might be ignoring the fact that your list is too long in the first place.
The solution that most people use is to put their 'heading' list into one select and let that choice set the content for a second select list.
You can use fancy dropdown widgets like Shield UI's DropDown, which allow you to render anything, from distinctive images to indents and paddings for each item.
I would suggest to use grouping within the drop-down menu. The groups can be collapsible so that user can go towards the required option easily. Also, don't forget to provide search feature (in the form of auto-complete) when user enters some text to find a country.
If it is a mobile interface, then providing two level list would be a good idea. First level will display boroughs and selecting an option will display the list of countries in that borough.