Rendering of road surface in standard OSM style
Discussion about how or if the surface=* tag should be used for rendering has been ongoing for many years. This article aims to give an overview of the different proposals and their advantages and disadvantages.
This article is needed to reset the current impractically huge GitHub issue  about this subject.
Like on your traditional paper map. Ideal for low zoom levels, but conflicts with tunnels and bridges at high zoom levels
Different colour or width of casing
See https://map.atownsend.org.uk/maps/map/map.html#zoom=15&lat=-24.98968&lon=135.02356 for an example where a different map style uses casing width and colour to indicate whether there is a roadside sidewalk or verge or not, and also to distiguish between trunk and primary roads.
baltcimaps.eu example of using coloured casing at high zoom. Note that filling is used at low zoom - see the filling section.
Different kinds of filling
A patterned line fill, similar to how we render beaches. Interesting for high zoom levels, it does not work at low zoom levels.
Dashed casing at low zoom, filling at high zoom
A combined rendering style.
- Disadvantage: the same property is treated differently, which might make it harder to interpret
- Advantage: allows for both simple overview maps, and many different patterns to render subtle differences like "concrete slabs" versus "continuous concrete"