Rename CSS rule

Report · Jun 15, 2009

Is there an easy way to rename an existing CSS rule (actually, a compound selector) and retain all the properties that were oringally set for that rule. I'd like to simply change a name of a rule to better fit my layout and naming scheme. Better planning up front would have eliminated this problem, but I goofed on the naming conventions. By renaming some of the rules, I can make my whole layout easier to understand and work with.

I tried the "edit selector," function, but when I did that, it deleted all the properties in that rule. For example, I had a container element that had float, margins, padding and text properties in it. When I changed the name using the "edit selector" function, the element no longer floated, the width had changed, etc.

Any help appreciated.

Report · Jun 15, 2009

Grab the original name from your CSS file.

Do a CTRL+F to do a search and change Find In: to be Entire Current Local Site.

Type the original name into the Find: field

Type the new name into the Replace: field

Do a Replace All and let Dreamweaver fix all of those for you.

Rename the rule in your CSS file.

Probably seems a bit basic but it's very thorough (DW won't miss anything) and you can see all the files it did a replace inside of in the Search Results panel so if there is one that looks out of place you can look into.

Of course, be careful what you search on. If the CSS rule you want to change is called RedText, you're planning on changing it to text-red and you have another rule called BigRedText then you might end up with a bunch of Bigtext-red throughout your pages. If you can do it this way, I'd suggest using class="RedText" for your search value so that you don't have any of the forementioned whoopsies.

Hope that helps.

Report · Jun 16, 2009

Thanks, Cavillac. I'll give it a try.

Report · Jun 15, 2009

tompen01 wrote:
I tried the "edit selector," function, but when I did that, it deleted all the properties in that rule. For example, I had a container element that had float, margins, padding and text properties in it. When I changed the name using the "edit selector" function, the element no longer floated, the width had changed, etc.

If you right-click the selector name in the CSS Styles panel, and select Edit Selector, it should open the name ready for changing, but preserve the contents of the style rule.

The other way to do it is to double-click the selector name in the CSS Styles panel. That should open the style sheet, and place your cursor at the beginning of the style rule, where you can easily edit it.

Report · Jun 16, 2009

David:

I tried this, and it still changes all the properties in the style. Essentially, it will change the name, but then I have to go in and enter all of the original properties to bring it back.

Regards,

Tom

Report · Mar 16, 2012

I'm wondering if your rule may not actually be in a style sheet. I was unable to change the name of a style until I right clicked on it and chose Move CSS Rules... to move it to a style sheet. As I didn't have one already, I chose new style sheet. After moving the rule, I was able to right click on the rule in the All Rules window under that style sheet and use Edit Selector to change the name without any of the properties changing.