CODEWITHSUNDEEP
css
Noah
Noah

Reputation: 964

Making open-source CSS class/id names unique

I'm trying to make all class/id names in a stylesheet unique, for example Bootstrap or some other open-source CSS framework.

I've found a list of all class names in Bootstrap 3, ex:

.col-sm-1
.col-sm-2
.col-sm-3
...

I'm going to be building a form using Bootstrap CSS that will be used on another websites (think Stripe's modal that you paste into your website and it maintains their styles).

However, if I leave the Bootstrap CSS classes and ids untouched there will be all sorts of problems with conflicting styles with other's websites.

Is there a way to preface or append my company's name or a random string to every single style in the stylesheet so that there won't be problems with conflicting styles?

Ex:

.col-sm-1-abc123
.col-sm-2-abc123
...

Having the styles above will most likely not cause problems with conflicting styles. But, it would require appending "-abc123" to every style.

Is there a way to do this? If so, how? If not, what's the alternative to accomplish what I'm trying to do?

Upvotes: 0

Views: 106

Answers (2)

Joerg
Joerg

Reputation: 3101

If you need to prevend name problems, then you should use namespaces. That you can do very easy with Less, example:

.your_namespace_name {

   // Here your Less/CSS code, for example the whole bootstrap css/less
}

Then you give your body or the top div the class of your_namespace_name:

<body class="your_namespace_name">

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Yes, possible. You can rebuild the stylenames from their source code using their documentation.

You have a whole lot of options to Customize Bootstrap in their site, where you can give prefix and suffix for all the classes.

Upvotes: 0

Related Questions