Prefix all css classes

If you use a text editor that will support regex find & replace you could do something like this:

#yourID .p_container < position:fixed; z-index:2; display:none; >#yourID .step

The closest I could get to automated is the following situation:

Find: ((\.-?)(.*?)(?=\,)) Replace #yourID \1 — find comma seperated classes

Find: ((\#-?)(.*?)(?=\,)) Replace #yourID \1 — find comma seperated id’s

I wonder if anyone can work out a better way of doing this.. the element selector i found difficult, so probably can be improved!

Find #yourID #yourID Replace #yourID — replace possible duplicates

You can use scss to auto prefix your classes.

create a file mystyle.scss

then in your command-prompt/terminal run

node-sass mystyle.scss mystyle.css 

This way all your css will be prefixed with #styleOnlyInsideMe

You can learn about node-sass here

JQuery — Get a element class based on a prefix, The question title and the question do not exactly match (title asks for prefix, question asks for suffix/partial) 1. Select elements by class-prefix Combine following two jQuery/CSS selectors: $ ( » [class^=’fx-‘], [class*=’ fx-‘]» ) [class^=’fx-‘] Starts-With-Selector

How to define css selector class prefix with SASS

Is there any posible to write this construction?

but only for this type of class prefix.

 this will be work, but when i write

 there will be nothing to show.

You can use the following construct:

For reference check out the W3C Selectors section.

As Beterraba mentioned this will also match .nameother-1 . To avoid this use the following:

If you e.g. want to match .name-1-2 you could do the following:

But this would also match .name-15-2 . To avoid that you need to make something like this:

But this would also match name-5-1-2 . And so on.. I think the list is endless. Anyway it’s getting very unreadable. I don’t recommend you to do so. Why not simply targeting these elements directly?

With Sass you can use variables and use them inside the selector. This way you can use your prefix as a variable and nest the suffixes you want to select.

Let’s say your prefix is name , and the suffix you want to select is -1 , but you don’t want to select othername-1 . You can do the following:

$prefix: name .# &-1 padding: 10px &-other_selected_suffix color: green 

This code would select both name-1 and name-other_selected_suffix , but it will not select othername-1

Css — Match all elements having class name starting with, By using multiple classes rather than looking for prefixes, you also save yourself a few battles with specificity and selector speed. Attribute selectors are slow, but also are really very specific compared to just classes. +1

JavaScript selector by class prefix? [duplicate]

in CSS, we can select multiple classes with same prefix like: ‘pre-1′,’pre-2’. with this line of code:

Is there any way in Javascript that I can get the same result in Javascript? Thank you!

The result I want to achieve is for Javascript code.

document.querySelectorAll('div[class^="pre-"]') 

Use jquery starts with attribute selector Selector [name^=»value»]

Working fiddle https://jsfiddle.net/66bw5u4h/88/

Css — Selector for a range of ids, If you’re happy with css3 selectors you could do something like. div [id^=»list_»] But this will also target divs with ids like list_foo. Share. Improve this answer. answered Mar 8, 2011 at 16:36. Litek. 4,890 1 22 28.

There a quick way to add prefixes to all CSS classes & ID’s?

I need to quickly add prefixes to all of of my classes and ID’s and it’s quite a large css file. I was thinking a quick regex string but so far I’ve failed. Any ideas?

I’ve tried simple things like:

Which will let me replace with #prefix_$1 but it doesn’t take into account:

etc. I can’t just replace all #[a-z0-9] because it will attempt to grab background-colors and so on.

I also need to replace all the classes, which is even more confusing for me.

Should find all your class names and id names

Edit: Here’s a link to a test on google’s CSS http://regexr.com?2ugv1

You could try this [#|\.][\w]+\.?([\w\-]+\s?) it worked on these

Also found a good tool to play around with different options. There will still be a problem with the colors, but you can’t really get rid of that since they follow the same rules as the ids.

update excluding the : from the results to not match colours.

It works for me in my stylesheet with all the cases i have;

I’d go with something like this:

/([#\.])([^\d][a-z0-9-_]+)/ Replace with $1PREFIX_$2 

However beware that it would catch colors as well, (if done with lowercase letters) I’m working on a workaround right now.

Add prefixes to CSS class names using LESS or SASS, I’ve been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example). I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn’t look like it will solve my issues.

Источник

Adding prefix to all css classes

Even on large CSS files you are only likely to add a few hundred bytes, and there are much better ways of minimising file size. Whilst prefixes can be considered overkill for small projects, the lack of proper CSS namespace support can lead to conflicts on larger projects, especially when using third-party libraries.

Adding prefix to all css classes

I am doing a project and i am instructed to add prefix to each classes of css. How would i go for this adding prefixes to all class using a text editor. I am using Sublime text editor. e.g .someclass < >TO .za_someclass

Anyway tried going through all the regex commands again and found the solution for it. Use ^.\b Where^(Match the beginning of the string).(will take the dot at the begining of the line) and \b(Match the beginning or end of a word) So excluding the numericals like 5.6em/pt etc from the css. Further using .za_ in my case to replace/prefix all instances.

There a quick way to add prefixes to all CSS classes, I need to quickly add prefixes to all of of my classes and ID’s and it’s quite a large CSS file. I was thinking a quick regex string but so far I’ve failed. Any ideas? I’ve tried simple things like: \#([A-z0-9]+) < Which will let me replace with #prefix_$1 but it doesn't take into account: #id < #id.class #id, etc. I can't just replace all #[a

Do We STILL Need to Use Vendor Prefixes in CSS?

Remember when you needed a -webkit prefix on EVERY CSS property? Do we still need to use CSS prefixes anymore? Is your website going to fall apart if you don

Is it a good practice to add prefixes to all css classes?

Is it a good practice to add prefixes to all css classes to avoid conflicts with possible third party widgets/CMS/etc? Isn’t this bad as it adds to file size ? How far should I go ? For example if my name is John Doe and I work on a business theme should I use JDBT-menu? Any article on this subject would be great. Thanks

In my opinion, it’s a very good idea to prefix CSS class names, along with implementing a strategy to follow logical naming conventions.

Whilst prefixes can be considered overkill for small projects, the lack of proper CSS namespace support can lead to conflicts on larger projects, especially when using third-party libraries. You can easily avoid such conflicts by prefixing CSS classes with your initials or a short abbreviation of your project name. Even on large CSS files you are only likely to add a few hundred bytes, and there are much better ways of minimising file size.

Take a look at the free online book, Scalable and Modular Architecture for CSS, for advice on CSS naming best practices. http://smacss.com

Personally, I don’t think is a bad idea. It may come in handy for future developers working on the project, if they can identify your code from the CMS/Framework code nice and easy.

I work a lot with Bootstrap, and I always use prefix.

I would do it, because the increased file size isn’t significant to me. Unless you have thousands of CSS classes, it won’t make a noticeable difference. Minify your css and you should not have any issue with css file size (it will have really low impact on your bandwith).

But obviously, if you don’t use any other party css, you shouldn’t use that.

Html — Prefix CSS Selectors, You can use scss to auto prefix your classes. create a file mystyle.scss #styleOnlyInsideMe < /*Your entire css*/ .myClass < /*your styles*/ >> then in your command-prompt/terminal run node-sass mystyle.scss mystyle.css This way all your css will be prefixed with #styleOnlyInsideMe You can learn …

How to add -moz & -o prefixes to code containing only -webkit tags

Say, I have this page: http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

I save the page & run the html file in my localhost. It works fine in chrome as the css uses -webkit prefix. Now I want to test whether is runs on firefox & opera too. So I have to add a -moz & -o prefix in the same css code which has -webkit.

Is there any other method rather than appending -moz & -o prefixes myself in the code? One method is writing a script to read the file & append the tags. Any others?

Note: I am not concerned about whether the css3 transforms used by -webkit are currently supported by -moz or -o or not. All I want is how to duplicate the -webkit lines, adding -moz & -o vendor prefixes to them.

May be vendor prefix JS helps you http://leaverou.github.com/prefixfree/

You don’t have ONE, You have many..

Class — Adding prefix to all css classes, Use ^.\b Where^ (Match the beginning of the string). (will take the dot at the begining of the line) and \b (Match the beginning or end of a word) So excluding the numericals like 5.6em/pt etc from the css. Further using .za_ in my case to replace/prefix all instances. Share answered Aug 21, 2013 at 10:27 …

How to add multiple css prefixes in jquery

I’m working on a class project and trying to add multiple css prefixes in my jQuery, but it’s not working. Any help would be greatly appreciated. When I leave it with only the -moz-transform, it works great in Firefox, but not in any other browser, so I’m trying to add all of the prefixes. Please let me know if anyone has an answer.

Is it a good practice to add prefixes to all css classes?, 3 Answers. In my opinion, it’s a very good idea to prefix CSS class names, along with implementing a strategy to follow logical naming conventions. Whilst prefixes can be considered overkill for small projects, the lack of proper CSS namespace support can lead to conflicts on larger projects, especially when using third-party …

Источник