case in

[damon]

I have seen the general opinion that html and css should use hyphens to separate words. I think that it’s not quite so simple, though.

This makes sense (XML is a lowercased language, hyphens are what CSS itself uses to separate things). But what about scope and interaction with other languages (particularly javascript and particularly because hyphens ruin dot notation by getting interpreted as subtraction)?

BEM uses hyphens to separate words, but has to account for scope as well, so you end up with block-name__element-name. Which is all well and good until you try to select a word (by doubleclicking or w keyboard), which will divide it up into block, name__element, and name. which is annoying.

I agree that for clear code it is essential to delineate between a word separation and a scope separation: cat mountain lion

So to me it kind of makes sense to separate scope with a hyphen, and camel case names in the middle of that (cat-mountainLion). But other possibilities include cat--mountain-lion, cat-mountain_lion. etc.

It also gets weird to me when we’re interacting with javascript, like through data attributes, where if you hyphen-case their values, then you’re introducing your hyphens into your javascript where otherwise you would probably want camels.

Here is an (oversimplified) example of how I would think of casing things. I’m not sure I’m convinced it’s perfect, but I can’t quite think of what I would prefer. I agree that camelCase isn’t the easiest to parse/read, but I also know that underscores are hard to type, but I want to allow for being able to select by words in a logical way while making sure I can account for scope in my naming, and what about filenames? (including those for handlebars partials)… AND I want to follow standards as closely as I can.

file: partials\buttons\backToTop.hbs
<button
class="button button-backToTop"
data-animation-easing-type="easeIn"
data-behaviour="backToTop"
type="button">
Back to Top
</button>
`

What would YOU suggest?

[theacefes]

I work primary in the .net stack. I have a CS background. I learned to develop using and reading CamelCase so I never understand the whole “it’s hard to read” reasoning. Maybe if you didn’t learn to program while using it – I don’t know.

My job requires me to work with a large group of engineers who have different specialties. Their primary languages are C# and JS. They use camel case in all of their class names, variables, functions, etc. For me to exclusively use hyphens/underscores in CSS or HTML would make 0 sense from an organizational standards perspective, especially when it comes to onboarding new people and making sure the standards are followed. Maybe if you’re freelancing or working alone or on an island away from other developers touching your code it makes sense to come up with your own standards but for me anyway, consistency is super important when a large group of people are involved.

Not to mention that Visual Studio doesn’t do the whole “double click” magic on hyphenated names – over time that can be a real slowdown. Not all of us use Sublime because we have to work the full stack and we aren’t always on a LAMP stack and require more advanced intellisense.

This is just my personal preference from my experience. It obviously won’t work for everyone.

Advice? Are you working alone on this code? Do what works for you. Are you not working alone on the code? Do what will make development more efficient and consistent for your team. Don’t get stuck on what some third-party framework likes to do if it doesn’t work for you.

[damon]

It’s a small team that will be growing soon, but I’d also like to be consistent within my own work.

We want to be consistent and standards based. the method I outlined makes the most sense to me, just wanted to see if there was disagreement in the world at large

In reading online a number of people were espousing that html and css are intrinsically lower case and dash cased in how they are written and therefore following that made the most sense.

also wow that is not what the subject of this thread was supposed to be :p

[Author]

Posts