CSSgram icon indicating copy to clipboard operation
CSSgram copied to clipboard

Prefix class names with `filter-`?

Open tomByrer opened this issue 10 years ago • 5 comments

Advantages:

  • prevents an onboarding devs say "What the ___ is 'hudson'?"
  • allows global search/replace/delete

Disadvantages:

  • larger files (mostly negated by gzip)
  • more typing (reduced by editors' autocomplete, copy/paste|search/replace
  • add extra coding to gulpfile

Could prefix with cssgram- also, less clear, but helps in finding this repo.

tomByrer avatar Mar 02 '16 13:03 tomByrer

1+

henryruhs avatar Mar 12 '16 21:03 henryruhs

Hey @tomByrer -- I agree with namespacing being a good idea for semantic understanding. My biggest concern with this is that it would be a breaking change to the previous workflow and would affect everyone who has already implemented the library. The question here is -- is that tradeoff worth it?

una avatar Mar 21 '16 21:03 una

1+ Another advantage, it will ease the code. for example


[class*="cssgram-"] {
  position: relative;
}

[class*="cssgram-"]:before, 
[class*="cssgram-"]:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
}

[class*="cssgram-"] > img {
  width: 100%;
  z-index: 1;
}

[class*="cssgram-"]:before {
  z-index: 2;
}

[class*="cssgram-"]:after {
  z-index: 3;
}

Effeilo avatar Mar 27 '16 17:03 Effeilo

@una Could keep the old class names, & make *.prefix.css|scss` files. @Effeilo good ideas

tomByrer avatar Mar 28 '16 14:03 tomByrer

@Effeilo I really like what you did there -- it would reduce redundant code. This is definitely swaying me toward the prefixed version

una avatar Apr 12 '16 00:04 una