-1

I'm making a website, using: MODx, SASS, Bourbon & Neat, jQuery, Bootstrap, Velocity, and some other minor libraries. The IDE used is PhpStorm, all files are encoded in utf-8, no BOM; It also includes search forms from 3rd party resources, some of them placed in iframe, and some are "native", with the standard html form. So, naming hell is near and I didn't yet establish any standardized CSS naming convention like BEM, SMACSS, etc., just some common good CSS recomendations (low nesting level, fine semantics, .class selectors everywhere)

I'm going to move to BEM, and looking for a namespace, but I don't want to stick to it, because it's my first BEM CSS project, and I'm not feeling 100% sure, that I'll perform fine with everything about it, and I'm afraid to break something, when doing any global operations (renaming, maybe something else). So, I want to use non-standard symbols combination, something like ☺☻ or ♥♦♣♠ or whatever. This should be 100% not busy by any project's libraries from 3rd party. After that, I can use, for example Grunt regexp, or custom post processing application, to replace that characters with normal namespace name, or no namespace at all (nice, small bonus). I'm not going to let this symbols remain in production code. Apache, PHP, SASS parser and the browser will receive "normal" code. Those symbols will be "visible" only to "Devend" items - Grunt, PhpStorm, etc.

However, I've never seen any articles and authors, on the Internet, recommending such approach. So, looks like, there are major issues with it. Are there any?

ADDED: And what are those issues?

PS: I'm aware, that a number of modern browsers are fine with unicode symbols for CSS class names (it's like Java allows unicode symbols for function/variable/etc. names), and therefore, I can theoretically leave them as is, but it doesn't look fine to me by the same reason: never seen anyone doing / recommending to do this way.

Yuriy Dyachkov
  • 439
  • 3
  • 16
  • If you really need some specific naming, I think you should use "-" "--" prefix or some namespace like UiKit library (http://getuikit.com/) – Slawa Eremin Aug 30 '15 at 16:45
  • But I have already decided to use Bootstrap as a main UI library. By the way, I've found out, why nobody uses such approach. I will post a solution in a couple of hours, when I develop and implement it. – Yuriy Dyachkov Aug 31 '15 at 09:00

1 Answers1

1

After some research I've sorted out the correct question and answer:

How to avoid troubles in the future, when choosing CSS namespace name for the project, with BEM naming convention.

A common good practice for CSS class naming is to use all lowercase letters. Maybe, in some naming methodologies, the rules can be different, but in BEM, it's a mandatory to use all lowercase letters. So I can use UPPERCASE letters with a couple of dashes, something like NS--. My own code is centralized enough to allow accurately define a search/replacement scope for Grunt, or PhpStorm, etc. And I can go develop my markup and don't bother about problems in the future. A major advantage is that it will work even without pre/post-processing, it's just a fine convention to use with BEM in my case.

The next challenge is how to deal with composed classname / selector strings in php and js. And here, the solution for the first part (static markup), doesn't restrict on how to solve this, "dynamic part" of the problem. And here we also can avoid pre/post-processing by introducing variables in PHP and JS.

I love pre/post-processors, but it is great that we can avoid using them in this case, since it's actually a naming convention problem, not a workflow enhancement issue, which is a primary purpose of webmaster's pre/post -processing tools.

Yuriy Dyachkov
  • 439
  • 3
  • 16