Vertical alignment for CSS for easy coding

TopStyle has been discontinued and support is no longer available. The forum is read-only. NOTE: TopStyle was not developed by the makers of CSS HTML Validator.
Locked
michaelmiller
Rank 0 - Newcomer
Posts: 5
Joined: Mon Oct 05, 2009 9:30 am

Vertical alignment for CSS for easy coding

Post by michaelmiller »

Hello,

Can you please add ability to align values (not just attributes) vertically like shown below . This significantly improves readability of CSS code.

I see in trial version that my manual aligned values destroyed by TopStyle, after changing a value from inspector.

Another suggestion: Although it is possible to change through options, please consider changing default tab behavior by making space characters default choice, which results compatibility increase between different editors tab behaviors.

Code: Select all

.Sample-Aligned {
    padding-top:             15px;
    padding-bottom:          15px;
    border-bottom:           1px solid #e5eefe;
    width:                   16px;
    height:                  16px;
    background-repeat:       no-repeat;
}
Isn't it better than this?

Code: Select all

.Sample-Not-Aligned {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5eefe;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}
As far as I know no other CSS editor support this.

Regards,
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Vertical alignment for CSS for easy coding

Post by MikeGale »

Spaces = Horrible idea.
User avatar
TopStyle Support
Rank VI - Professional
Posts: 506
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: Vertical alignment for CSS for easy coding

Post by TopStyle Support »

I have added the following new setting: Options (F8) > keep whitespace when a CSS property is changed in the inspector.

To be included with 4.0.0.67

Thanks, Stefan.
michaelmiller
Rank 0 - Newcomer
Posts: 5
Joined: Mon Oct 05, 2009 9:30 am

Re: Vertical alignment for CSS for easy coding

Post by michaelmiller »

MikeGale wrote:Spaces = Horrible idea.
Why is it horrible, please be more descriptive.
michaelmiller
Rank 0 - Newcomer
Posts: 5
Joined: Mon Oct 05, 2009 9:30 am

Re: Vertical alignment for CSS for easy coding

Post by michaelmiller »

Stefan van As wrote:I have added the following new setting: Options (F8) > keep whitespace when a CSS property is changed in the inspector.

To be included with 4.0.0.67

Thanks, Stefan.
Thanks Stefan. Keeping white space is very good. Also is it possible to add option that CSS generates styles automatically with vertically aligned?
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Vertical alignment for CSS for easy coding

Post by Albert Wiersch »

michaelmiller wrote:
MikeGale wrote:Spaces = Horrible idea.
Why is it horrible, please be more descriptive.
Spaces to align values might make for better readability... but they can be a hassle to keep aligned (unless you have a program that does it easily) and one could also argue that they waste space (bytes) and bandwidth.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Vertical alignment for CSS for easy coding

Post by MikeGale »

Creating content has several constituencies that a developer ought to play to. The developer himself and the audience among them.

I try to avoid things that are hostile to any audiences.

In this case consider:

1) Space waste, clogs the worlds HTTP arteries, and is anti audience. I took the sample provided and made a measurement of the difference. The suggested approach makes the CSS fragment 54% bigger than my compact version of it. (It's easy to be even more compact too.) If you apply that attitude across all content you either need more bandwidth or you get a slower Internet. That's an unacceptable price, in my book, just for developer convenience.

(The real space waste is maybe bigger. A clean simple approach is to take the longest left hand item, say add two spaces to it, then pad to that. In my experience such approaches tend to put so much space between left item and right item that readability suffers.)

2) I'm sometimes forced to clean up source so that it meets minimum standards for publication. Things like changing spaces to tabs, getting rid of those horrible 80 character lines, or getting rid of that 90% burden of additional bad, unwanted and illegal markup that a certain well known editor slaps on any document (and that's in save space mode!). Any tool that stuffs spaces into text is a potential source of unnecessary work for any competent and thorough future developer. Fortunately the modern tools I use are a lot better at this than they were even 6 years ago. It's often not hard to fix while you note that the originator is a bit less professional than you first thought. But there is often still work to be done, like fixing up the output of tidy.

3) It doesn't really work. With a monospace font it looks good. I don't look at work in only one editor, and I'm sure that's pretty common. There might be half a dozen that I use regularly. Some are set up for high readability. That means a good choice of font. For a lot of people that is not a monospace. In such an editor setup the effect is laughable. Kind of half a job is worse than no job at all.

During editing I think alignment is great and I really like the idea. Burdening the audience with a lot of passenger characters and bandwidth hogs is bad.

(There is a much more erudite discussion, than I'm presenting, in the Python (computer language) archives. White space is significant in that language, as it can be in F#, so it's an important issue. In that case I come down on the side of the tabbists.)

Potential answers are tabs or an editor that has a smarter layout engine and gives a great display without embedding it in the source.

(I can picture some transformations that an editor would run invisibly behind the scenes...)

I hadn't originally intended to go into any detail on this.
michaelmiller
Rank 0 - Newcomer
Posts: 5
Joined: Mon Oct 05, 2009 9:30 am

Re: Vertical alignment for CSS for easy coding

Post by michaelmiller »

Mike, thank you for your response.

I think easy maintainable code is the most important part of development. Avoiding spaces and comments to save bandwidth does not pay in long term. I suggest you to use YUI or other CSS compressor. I develop CSS in separate files with lots of spaces and comments. However before publishing I use compressor to make them compact and a single file.

Using variable space fonts is not a good practice in my opinion.
... an editor that has a smarter layout engine and gives a great display without embedding it in the source...
It's a good idea. Maybe TopStyle should have this feature. However this doesn't solve my and your concerns about other editors.

Maybe an automated save process added TopStyle would solve the problem well. Think your source full of aligned spaces and comments called 'site.css'. But when you save, editor may save two files called 'site.debug.css' with original source and another one called 'site.css' striped white spaces/comments and compressed by third party or internal compressor. This way it would have best of two worlds.
michaelmiller
Rank 0 - Newcomer
Posts: 5
Joined: Mon Oct 05, 2009 9:30 am

Re: Vertical alignment for CSS for easy coding

Post by michaelmiller »

Spaces to align values might make for better readability... but they can be a hassle to keep aligned (unless you have a program that does it easily) and one could also argue that they waste space (bytes) and bandwidth.
Yes, this is what I'm asking for a feature from TopStyle indeed.
Lowiepete
Rank I - Novice
Posts: 17
Joined: Wed Dec 09, 2009 10:34 pm
Location: Lowestoft, Suffolk, UK
Contact:

Re: Vertical alignment for CSS for easy coding

Post by Lowiepete »

Hello Folks,
I'm fascinated by this discussion. Just one question - if CSS files are gzipped
server-side, does it matter about white-space?
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Vertical alignment for CSS for easy coding

Post by MikeGale »

One issue in white space is that users can inspect content at will.

Fortunately most don't or the Internet would be the laughing stock of the world.

It's real easy to get a laugh. Inspect a web site and better still also check it with a competent syntax checker. It's remarkable how many companies don't seem to know what they're doing!!

CSS is not so easy to read and gets even less attention than HTML. So from that perspective it's not so important.

If your developers are dealing with messy CSS that is a whole other problem. It will, almost certainly, cause maintenance problems. (If they are naturally messy I wouldn't want them touching my code.)

So if you strip whitespace, I think you should deliberately and thoroughly separate published code from development code. An extra step and extra hassle.
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Vertical alignment for CSS for easy coding

Post by Lou »

MikeGale wrote:So if you strip whitespace, I think you should deliberately and thoroughly separate published code from development code. An extra step and extra hassle.
No more an extra step or hassle than the necessary step when using an assembled or compiled code, if you remember. You maintain the source code and distribute something that is "not" human readable but more efficient for execution.
Lou
Say what you will about Sisyphus. He always has work.
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Re: Vertical alignment for CSS for easy coding

Post by CaryD »

michaelmiller wrote:This significantly improves readability of CSS code.
Personally, I find it harder to read, but I work with CSS a lot, so my eyes are trained to read the standard formatting, rather than lines with big gaps. To each his own.
Locked