5 ms·
I know four extremely good CSS developers with at least 500 sites of combined experience. Two use one-line and two use multi-line. Both positions are complete
by JoelSutherland 17y ago
I know four extremely good CSS developers with at least 500 sites of combined experience. Two use one-line and two use multi-line.
Both positions are completely reasonable. Not one of the four things either style is stupid or unnecessary.
To people with a background in programming the benefits of multi-line css are immediately obvious. Without a strong CSS background it is harder to appreciate the advantages of one-line selectors. This article misses a number of them:
1. It is just as easy to scan attributes that are in one line for someone that writes a lot of css. Typically attribute order is fixed so it becomes natural to know where in a line to look for particular ones.
2. Finding a selector is different than scanning selectors. It much easier to understand the structure and intent of a CSS file when you can look at many selectors at once.
3. Comments are visually more significant when using one-line CSS. CSS for the header section of a website might run 20 lines using single-line or 100 lines using multi-line. It is much easier to use comments to structure a CSS document using single-line.
To be clear I am not advocating single-line over multi-line. I am just trying to give better representation to a method that perfectly reasonable people use.
- qeorge 17y agoThese are good points. Especially, "Typically attribute order is fixed so it becomes natural to know where in a line to look for particular ones." I don't have a strong preference for multi-line or single line, but I do insist on keeping all the attributes in alphabetical order.
- JoelSutherland 17y agoI strongly prefer this rough ordering when writing css either way: * Position * Display * Box Model * Text Stuff * Z-Index This makes it easiest to scan for layout information which is what I usually toughest to figure out.
- thedz 17y agoBut again, this comes down to knowing the tools better. I've done probably as much CSS as the developers you mention, so I'm not completely talking out of my ass. I just want to make sure that people realize what their editors are capable of before doing manual workflow optimizations. 1. With all things equal, I'd say that the developer that is able to scan a vertically aligned list of attributes can do it fast. Plus, there's no horizontal scrolling. I'm not saying one-line scanning will be slow, but I'm arguing that with equal practice, vertical attributes will simply match what the eye is able to do more naturally. 2. In Textmate, you can fold all the attributes, and see a essentially a list of your selectors, with comments. 3. See #2. I wonder if the developers you mention ever gave using symbols lists and code folding a shot before manually adjusting their workflow to mimic those features. I really do believe that if they did, they wouldn't be using the one-line approach.
- JoelSutherland 17y agoI'm not arguing for one way or another. I'm saying that reasonable CSS experts prefer doing it both ways. I can assure you that each one of them has coded their fair share of sites both ways. In fact they pick up each others CSS and make changes all the time. They just reasonably have different preferences.