4 ms·

I dunno, I write CSS for a living so I got nervous when I saw the title, but when I read it I can tell this is advice from the frontlines. This guys understand

by err4nt 11y ago

I dunno, I write CSS for a living so I got nervous when I saw the title, but when I read it I can tell this is advice from the frontlines. This guys understands CSS, and if you actually understand CSS you dont need tools like SASS, and you dont need rigid structures like BEM. The most beautiful (and seemingly ignored) aspect of CSS is that specificty cascade. Everybody seems to be trying to isolate their CSS into modules so they dont conflict instead of using the CSS together in harmony. After writing thousands upon thousands upon thousands of lines of CSS here are my quick opinions: - 1 global CSS files should take care of 95% of the styling, and if a specific views needs to override that global style, give it a teenty tiny bit of CSS - SASS is cool, but largely unnecessary, and so I believe that 80% of the time people use it it just creates more work (learning curve, project requirements, compliation step) than it saves. Again, I write CSS for a living and I have never found a place where SASS sould have saved me work if you actually know how to write CSS. - Nesting is awful, thats not how CSS works. I could abuse indents and arbitrarily block my code in JavaScript and if I did that everybody would assume I was an amateur who didnt know what I was doing. When I see nested CSS I go on high alert for bugs because it is clear the author doesnt understand CSS - while IDs and classes can be useful, So many frameworks now work in a way that they write all of the styles you might nedd in advance and then you 'tag' which elements get which styles ising classes. This is literally no better than inline styles, and is an abuse of HTML in an attempt to not have to write a small amount of CSS. If your markup is CLEAN and simplethen styling it with CSS is also very straightforward. I havent read the authors piece but in the past year I have noticed a drastic reduction in my own use of classes and other identifiers in HTML as my understanding of more advanced CSS selectors has increased. CSS is a beautiful, POWERFUL language, and I would recommend everybody to do a few things: - stop using CSS you didnt author - write your CSS by hand (no SASS, STYLUS, LESS) - Only ever copy-paste code youve written, if youre bringing external CSS into your codebase, retype what you need from it. I know those sound like youre going to be sitting there forever typing in thousands of lines of CSS, but operating that way VERY QUICKLY forces you to gain skill at discerning what is actually required or not. Whenever I do responsive consulting I feel like most sites are 5x overbuilt in the HTML, which means that your CSS is many many times longer than it needs to be. The biggest bottleneck to CSS simplicity is poorly thought out HTML markup.

bambax 11y ago
I do write all my CSS by hand but I'm not good with it; I'd like to improve: what article (or book) would you recommend to help one actually "get" CSS? (I'm also not sure what is meant by "nesting": combining selectors like this "div p" or "div > p"? Or is it something specific to SASS?)
- err4nt 11y ago
  The thing that has helped me the most is reading CSS. It's a lot easier to write CSS than it is to read it. Start with CSS you already have that works and re-type that into a new file and you'll soon start experimenting with what you can leave out, or just what does what. One thing that really helps me read code is using a syntax-highlighting editor with a decent colour theme. You don't need auto suggesting, automatic tag closing, or anything. Every keystroke you press on the keyboard should map to one character being added or removed from your document. Soon you'll find a formatting style that helps you quickly scan and read. For quickly skimming CSS it's best if it's all on one level. Selectors can be long, so starting them at arbitrary indents makes it a mess. What they mean by nesting would be grouping 'blocks' of CSS together by indenting them. This might be one way somebody would nest button hover state under a CSS rule for a button: button { background: darkgreen; } button:hover { background: green; } This is a super clean example, but in a big CSS file it can get pretty messy pretty quickly.
bshimmin 11y ago
Thanks for taking the time to write this longer response to my relatively flippant one. It's also pleasant to see some positivity here about CSS, which in these halls is often decried as being complete junk (rather unfairly - not many things have stood the test of time so well, and remain mostly usable even when applied in a wildly different context from their initial humble origins). That said, I'm a little surprised you see no value at all in CSS preprocessors; having spent over a decade writing CSS by hand (from the CSS 1 days), it was a moment of sheer joy when I started using Sass - probably more than five years ago now - and discovered variables and mixins could be used with CSS (and to a lesser extent nesting - though it's immediately obvious to anyone who looks at the actual output or thinks for a moment about how this works that it isn't a great idea to overuse it). I would find it very hard to go back to writing raw CSS. If you're working on a team of developers all contributing CSS to a project, do you find that one CSS file is actually manageable? Do you not get merge conflicts? Does it require vast discipline? 100% agree with you about the quality of actual markup in 2015. It's miserable.

by err4nt 11y ago

bambax 11y ago

I do write all my CSS by hand but I'm not good with it; I'd like to improve: what article (or book) would you recommend to help one actually "get" CSS? (I'm also not sure what is meant by "nesting": combining selectors like this "div p" or "div > p"? Or is it something specific to SASS?)

err4nt 11y ago
The thing that has helped me the most is reading CSS. It's a lot easier to write CSS than it is to read it. Start with CSS you already have that works and re-type that into a new file and you'll soon start experimenting with what you can leave out, or just what does what. One thing that really helps me read code is using a syntax-highlighting editor with a decent colour theme. You don't need auto suggesting, automatic tag closing, or anything. Every keystroke you press on the keyboard should map to one character being added or removed from your document. Soon you'll find a formatting style that helps you quickly scan and read. For quickly skimming CSS it's best if it's all on one level. Selectors can be long, so starting them at arbitrary indents makes it a mess. What they mean by nesting would be grouping 'blocks' of CSS together by indenting them. This might be one way somebody would nest button hover state under a CSS rule for a button: button { background: darkgreen; } button:hover { background: green; } This is a super clean example, but in a big CSS file it can get pretty messy pretty quickly.

bshimmin 11y ago

Thanks for taking the time to write this longer response to my relatively flippant one. It's also pleasant to see some positivity here about CSS, which in these halls is often decried as being complete junk (rather unfairly - not many things have stood the test of time so well, and remain mostly usable even when applied in a wildly different context from their initial humble origins). That said, I'm a little surprised you see no value at all in CSS preprocessors; having spent over a decade writing CSS by hand (from the CSS 1 days), it was a moment of sheer joy when I started using Sass - probably more than five years ago now - and discovered variables and mixins could be used with CSS (and to a lesser extent nesting - though it's immediately obvious to anyone who looks at the actual output or thinks for a moment about how this works that it isn't a great idea to overuse it). I would find it very hard to go back to writing raw CSS. If you're working on a team of developers all contributing CSS to a project, do you find that one CSS file is actually manageable? Do you not get merge conflicts? Does it require vast discipline? 100% agree with you about the quality of actual markup in 2015. It's miserable.