Superfluous decoration for unordered list CSS

Steven McCoy
Steven McCoy
in TR Internal
The [Eikon Web UI][1] site includes a list of HTML elements with examples of CSS styling. One of these examples is an unordered list but uses a specific class *bulleted-list*, why? Unordered lists are bullets by default. Many other elements such as headers do not use specific class names.
  • Bulleted List item1
  • Bulleted List item2
c.f.
  • Bulleted List item1
  • Bulleted List item2
[1]:
https://amers1.apps.cp.extranet.thomsonreuters.biz/Apps/EikonWebUI/1.2.12/
Tagged:

Best Answer

  • gregory.machon
    gregory.machon
    Answer ✓
    Hi Steve

    Ideally yes, default UL > LI style is enough and valid with bullet points / disc, etc. When it comes to targeting a specific UL to style it differently like ULs in navigation or providing any other style (i.e. using images instead of available symbols) adding class is relevant of course. If it's actually a class name added to UL tag or parent container that's kind of a separate story.

    When used in content section it's easier to use "clean" UL rather than forcing user to specify the class name. Considering overall use encapsulating the need to specify the class name on the tag may cover more use cases. Pretty much it's a trade of between adding a class name to multiple ULs or adding one class name to a parent container.

    I wouldn't say that global UL > LI styling is the best approach considering things like reset CSS (as per Timothy answer).

    We want to make it more user friendly of course so adding additional option to style ULs within a parent container apart from UL.classname support may be the best approach here.

    Cheers
    Greg

Answers

  • Timothy Sullivan
    Timothy Sullivan
    There is no global default styling for lists, its what ever the browser and user-agent style-sheet wants it to be. Also there is no bullet style value, it is generally 'disc'. The class is simply stating that it wants the list to be bulleted. What the bulleted means is determine by whatever stylesheet rules are loaded. It could just be disc, it could also be a square or an image, or absolutely nothing, the CSS doesn't matter, its simply the semantic markup of the HTML. To really understand why you would have to look at the intent of the HTML of the entire site as a whole. Also many CSS stylesheets do a style [reset][1], so be default the list-style-type would be none. Therefore the class is semantically stating that the list should actually be "bulleted". [1]:
    http://meyerweb.com/eric/tools/css/reset/

Categories