Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Why are there some really long class names?

Posted by: wdgjunkie May 30 2018, 11:37 AM

Hello there,

I'm fairly new to programming, so please excuse my ignorance. As I'm perusing different websites studying the different html/css syntax, I am coming across the typical "container," "header," etc. classes which I am understanding, but I am also finding some very ornate, long-winded class names such as:

CODE
<body class="home blog tm-isblog wp-home wp-front_page" data-gr-c-s-loaded="true">


or

CODE
<div class="uk-navbar-content uk-navbar-center uk-visible-small">


or

CODE
<section class="tm-top-a uk-grid tm-grid-block" data-uk-grid-match="{target:'> div > .uk-panel'}">



I am just curious as to why a developer would choose to name a class to such a degree instead of something much simpler. Could someone help me understand the reasoning behind this, as well as how I am supposed to know how to name the class when a name this descriptive is in order?

Posted by: pandy May 30 2018, 02:37 PM

They could be stupid. Or they don't think. Or the names come from some template. I see a wp prefix which I assume stands for WordPress. Programmers are seldom good at front end and many templates for blogs and forums are a mess when it comes to HTML and CSS.

Personally I like shortish names, but not so short I don't understand what they mean a year after I came up with them. Not too much abbreviations. Above all I try to use meaningful names. If that means the name gets long, so be it.

Like I wouldn't use top_navigation_bar when I can just as well use topnav. But I would never use something like tnb.

Sometimes long descriptive names are used because the author is only familiar with the most simple selectors. 'uk-navbar-content' could be an example of that. It could be they have an DIV named 'uk-navbar' then another DIV or a list inside that with the actual links and they call it 'uk-navbar-content' so they'll know what that CSS rule is for, because they don't know they don't need to class everything if they use smarter selectors.

Posted by: wdgjunkie May 30 2018, 03:19 PM

QUOTE(pandy @ May 30 2018, 12:37 PM) *

They could be stupid. Or they don't think. Or the names come from some template. I see a wp prefix which I assume stands for WordPress. Programmers are seldom good at front end and many templates for blogs and forums are a mess when it comes to HTML and CSS.

Personally I like shortish names, but not so short I don't understand what they mean a year after I came up with them. Not too much abbreviations. Above all I try to use meaningful names. If that means the name gets long, so be it.

Like I wouldn't use top_navigation_bar when I can just as well use topnav. But I would never use something like tnb.

Sometimes long descriptive names are used because the author is only familiar with the most simple selectors. 'uk-navbar-content' could be an example of that. It could be they have an DIV named 'uk-navbar' then another DIV or a list inside that with the actual links and they call it 'uk-navbar-content' so they'll know what that CSS rule is for, because they don't know they don't need to class everything if they use smarter selectors.



This is a wonderful response. Thank you!

Posted by: pandy May 31 2018, 01:33 PM

I don't know if I'm right. I'm just guessing. wink.gif

BTW, abbreviations would maybe be OK if you developed a system. tnb is always the name for a top navbar and so on. Problem would be if you need to let someone else work with your stuff. He would need to learn your system.

After all, names in HTML are heavily abbreviated and we learnt that. I sometimes think names in CSS are too verbose. If English isn't your first language spelling mistakes can sometimes be annoying...

I'm sure of one thing. It isn't easy to come up with good names. happy.gif

Posted by: Christian J May 31 2018, 02:19 PM

Another thing to watch out for is name collisions, especially if you're a template designer or one of the http://www.quirksmode.org/blog/archives/2016/10/down_with_the_t.html blindly embedding every third-party resource they've ever heard of. mellow.gif

To avoid collisions it might be good to use prefixes (and hope nobody else is using the same one as you).

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)