CSS Formatting

[Fa310tx]

Older versions of Dreamweaver had an option to define how we wanted CSS to be formatted.

I don't see such an option, anymore.

Can we still customize that?

JJ

[Nancy OShea]

Go to Edit > Preferences > CSS Styles.  Those are the only options.  CSS formatting is mostly automatic now.

[Fa310tx]

But that has no facility to defining the formatting.

Should it put all the selectors on one line or multiple lines?

Should it put all the properties on one line or multiple lines?

Should the curly braces be on the same lines or new lines?

Those are what I'm talking about.

JJ

[Nancy OShea]

The thing is most of us minify CSS now, so formatting is kind of a moot point.

[pziecina]

https://forums.adobe.com/people/Nancy+OShea  wrote

The thing is most of us minify CSS now, so formatting is kind of a moot point.

Sorry Nancy, but I disagree. Formatting is very important when writting css, (or any code) the removal of the formatting options since the incorporation of the Brackets code editor, is just one of the reasons I think Dw is now worse than web code editors in the late 90's, when writting css was a nightmare because the code was not supported, or when it was formatting was as per c++.

[Nancy OShea]

The default CSS formatting + the code color Theme I use (Ruby Blue) looks fine to me.   I don't spend much time worrying about code formatting, indets, etc... since it's all minified at the end anyway.

Unminified CSS in DW

[pziecina]

Not everyone minifies their css, and the use of minification is still a debatable point.

Yes, bootstrap css is minified as are many other frameworks, (both css and js) but that is to reduce the extreme file sizes of the default files. If someone is creating their own css and they are not using a framework, then simply allowing the files to be gzipped by the server for delivery is often just as good, and much easier.

[Nancy OShea]

Google Page Speed Insights,  recommends minifying and using GZIP  compression.  Even on small custom coded files, every little bit helps.

Google Page Speed Insights

The results from one of my sites:   88/100 on Mobile, 97/100 on Desktop

Optimizations Already Present

Avoid landing page redirects

Your page has no redirects. Learn more about avoiding landing page redirects.

Enable compression

You have compression enabled. Learn more about enabling compression.

Leverage browser caching

You have enabled browser caching. Learn more about browser caching recommendations.

Minify HTML

Your HTML is minified. Learn more about minifying HTML.

Minify JavaScript

Your JavaScript content is minified. Learn more about minifying JavaScript.

Optimize images

Your images are optimized. Learn more about optimizing images.

Prioritize visible content

You have the above-the-fold content properly prioritized. Learn more about prioritizing visible content.

Reduce server response time

Your server responded quickly. Learn more about server response time optimization.

[pziecina]

We have been through such discussions before, so let us just agree to disagree.

[Jeremy Pinson · Accepted solution]

This does not answer the OP's question, which is not what is 'best' but whether custom CSS formatting is still available. This featured was deprecated from the Dreamweaver CC2017 UI after Brackets was incorporated. See thread;

css Apply Source Formatting DW 2017

Personally, I see this as a poor decision. I find it faster to work on CSS with each element on a single line, as opposed to my colleague who prefers each style on a separate line; we're different. It's not so much about the final file we'll be hosting but what we're working on.

In any case, customising CSS formatting is still possible but you must make modifications outside the app. As per the above thread (you may need to adjust the path based on your current version)...

C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver CC 2018\cloudpref\Adobe Dreamweaver CC 2018

Look for '<section name="Source Format">' and in this element you may customise various CSS formatting options. For instance, changing 'CSS Props On New Line' from TRUE to FALSE prevents every new style from appearing on a new line;

<pref name="CSS Props On New Line" type="string" val="TRUE"/>

However, you will also need to update the corresponding entry in the Registry (again, your registry path may differ slightly);

HKEY_USERS\S-1-5-21-116350639-1196654513-2025997110-70382\Software\Adobe\Dreamweaver CC 2018\Source Format

Good luck!

[Fa310tx]

jeremyp99313866​

That's good information to have.

JJ

BTW...

Is there not a way to quote?

JJ

Oh, and why is something marked as the answer?

I don't think minifying CSS is the answer for formatting CSS.

Hehehe...

JJ

[pziecina]

Fa310tx  wrote

I don't think minifying CSS is the answer for formatting CSS.

Minifying is not the answer when it comes to formatting css, (minifying is done after the code is written). It does show the route that Dw is going though, in that it has primarily become a program for those who use Bootstrap and a pre/post-processor. As the only way for Dw to allow users to format code is for them to re-write the Dw programs code, and in order to apply vendor prefixing or minification, is to work with a sass file and use the built-in css processors.

My advice to anyone who does not like the way Dw works or the obsession it now has with including only what is open source anyway, plus mainly concentrating on those users who wish to do almost no coding, is to file bugs, post here and generally make your thoughts and requirerments know.

I would not be surprised if the next version concentrates on what ex Muse users want, not coders.

[Jeremy Pinson]

Very good point, pziecina​ - it does appear that DW has been modified to appeal to those using a pre-processor... which is not all of us! Also agreed that the best place to raise this is as a bug however, I have done so already and contacted the team directly yet nobody seems to think it is worth reinstating.

One thing I forgot to point out in my original post was the configuration file name, which is;

C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver CC 2018\cloudpref\Adobe Dreamweaver CC 2018\AdobeDreamweaverSettingsPrefs.xml.tmp

[Kratika Agarwal]

Hi Fa310tx,

Thanks for reporting.

We are happy to inform you that we have done some improvements in CSS code formatting in our latest Prerelease drop Dreamweaver CC Next 15104.Please give it a try and share your feedback.

Prerelease Invite link:
Adobe Prerelease

Thanks

Dreamweaver Team

[jeremypinson]

Kratika Agarwal​ - I have just installed CC Next 15104 and don't see anything new in regards to CSS code formatting; can you please indicate what has changed and where any new settings are?

[Nancy OShea]

That should all be described in the pre-release forum notes.  We cannot discuss pre-release products in the public forum.