Pro CSS tip #1 (emphasis on the 'Pro' more than the 'CSS'): If you want to be a professional and work as part of a team, get better at documenting your code. Write code that other people can maintain when you're not available. Comment your code. Write actual docs. Write tests.
Pretty good suggestions. Here are some thoughts that I had reading the article;
* Suggestions are newly browser supported CSS properties in lieu of the earlier ones. It is always easier to use new and improved ones than making it work on olden browsers.
* Most of them are also of how you should scaffold your styles and not necessarily the nitty-gritty of writing better CSS.
For instance, vertically centering a block element inside another block element can be done in various ways
* display:table, display:table-cell with a vertical-align: middle method for olden browsers is indeed of of those sure-shot method that works across a plethora of browsers.
* The translate method for newer browsers including IE10+ with some quirks.
* And of course, the Flexbox method, which is the current talk of the CSS town.
Liked the idea of ":not()". This is something most developers overlooked.
The blanked statement and advice to 'use of SVG for icons' is something I can debate. This is not a binary statement/switch that you can make decision on. I'd rather decide on the method based on the requirement at hand and how it is being delivered. Even in dev-time, I do setup such that the team have to just drop in SVGs but eventually, a task runner takes care of the final icon set - be it as a @font-face - either served separately or BASE64 encoded with the styles (for something within a size budget that we set for the font-family).
I'd be pointing anyone wishing to improve holistically from a n00b to a better player would be to look at the likes of http://codeguide.co/, http://sass-guidelin.es/ et al. And get http://caniuse.com/ hooked up in some way, either via your IDE or leave it open in a browser tab.
Don't think the `:not` tip is good. You're adding 1 more level specificity to all of nav items except the last one as opposed to that 1 level to just the last one. Makes it a bit more annoying to overwrite when it comes to it.
So if there's no link content, insert the URL as the content. That seems like a content issue and not a styling/CSS issue, and would break with any links where the "content" is a background image.
An empty <a> link will also likely fail accessibility tests and while the presentation is works for visual keyboard-only users, screen reader users will probably have problems.
Firstly, thank you to the writer, this was a nice short read.
However, It's funny, there are so many of these collections of CSS Pro Tips, though as someone who writes CSS, I feel the complexity is not in these general rules, but lies more in how CSS is organized for readability, how to write _composable_ and _reusable_ CSS components, and the like.
I'd love to see more articles on how people organize their CSS (either with BEM, SMACSS, or other creative frameworks), or how they create reusable CSS components to effectively add to an overall styleguide, rather than one-off tricks. Or how to reduce unused CSS clutter, or make _huge_ performance gains by doing certain things.
A few weeks ago, I came across this great article by @fat [1] and I think this is infinitely more helpful for the common beginner than a few tips. Using :not in CSS, vertically-aligning items, or making comma-separated lists using pseudo-elements may be helpful, but those can be easily Googled.
The use cases are mostly really specific. Rather than focus on "tips" like this, I think "best practice" guides are much more helpful. Actually thinking through questions like how much should I link my DOM to my CSS (e.g., #container > p vs p.class_name) is generally more helpful imo than specific tasks that you can google.
These tips are neat but are not going to make you a pro. What will make you a pro is understanding the box model, colors / gradients, and selector preference/scope.
Being pro in css however lies within writing readable, maintainable, well documented css and these tips focus on none of that and will not make you any more or less pro than you were before reading them :)
Same here, I've mainly learned from just guess and check. Any tutorials I've tried (admittedly not many) are too basic and haven't given me a good mental model of how to approach a problem with CSS.
A lot of these are actually bad practice, or things you should already know. Before you use any of them, you should research each of the rules separately to see how they work.
Code maintainability is #1 in css, and is the hardest thing to do. The main focus should be on that, and not trying to be clever or tricky.
Watch for some buggy behavior with flexbox in IE11.
"Some buggy behavior" may more or less mean "it completely doesn't work in IE11" (which still has very significant market share) unless you start researching how to write cross-browser flexbox (at which point, welcome to trawling StackOverflow and feeling like you're almost back in the old days of crazy CSS browser hacks).
Are you saying use <div class="heading"> vs <h1> or even <span class="bold"> instead of <b> or <strong>? because if so I disagree. Just on accessibility grounds this is a terrible idea.
I also disagree strongly with using encapsulated CSS everywhere except for individual widgets (and even then, where possible widgets should inherit styling in a sensible way -- otherwise a list row that goes in a main window table needs to be implemented separately from a list that goes in a sidebar, etc.
What I think is bad is having a convoluted CSS hierarchy. Having one or at most a few big standardized containers (e.g. document, tool-palette, browser) which receive reused styles and inline or very local css for specific cases allows you to implement preference settings, high contrast modes, etc. This is how actual desktop applications tend to work and they're a heck of a lot more complex than most websites.
[+] [-] onion2k|10 years ago|reply
[+] [-] lfx|10 years ago|reply
[+] [-] Brajeshwar|10 years ago|reply
* Suggestions are newly browser supported CSS properties in lieu of the earlier ones. It is always easier to use new and improved ones than making it work on olden browsers.
* Most of them are also of how you should scaffold your styles and not necessarily the nitty-gritty of writing better CSS.
For instance, vertically centering a block element inside another block element can be done in various ways
* display:table, display:table-cell with a vertical-align: middle method for olden browsers is indeed of of those sure-shot method that works across a plethora of browsers.
* The translate method for newer browsers including IE10+ with some quirks.
* And of course, the Flexbox method, which is the current talk of the CSS town.
Well, centering in CSS has even spawn a whole industry - http://howtocenterincss.com/.
Liked the idea of ":not()". This is something most developers overlooked.
The blanked statement and advice to 'use of SVG for icons' is something I can debate. This is not a binary statement/switch that you can make decision on. I'd rather decide on the method based on the requirement at hand and how it is being delivered. Even in dev-time, I do setup such that the team have to just drop in SVGs but eventually, a task runner takes care of the final icon set - be it as a @font-face - either served separately or BASE64 encoded with the styles (for something within a size budget that we set for the font-family).
I'd be pointing anyone wishing to improve holistically from a n00b to a better player would be to look at the likes of http://codeguide.co/, http://sass-guidelin.es/ et al. And get http://caniuse.com/ hooked up in some way, either via your IDE or leave it open in a browser tab.
Edits: I thought Hackernews supported Markdown!
[+] [-] Loque|10 years ago|reply
[+] [-] dangamble|10 years ago|reply
[+] [-] pc86|10 years ago|reply
[0] https://github.com/AllThingsSmitty/css-protips#use-attribute...
[+] [-] extra88|10 years ago|reply
[+] [-] netghost|10 years ago|reply
[+] [-] AllThingsSmitty|10 years ago|reply
[+] [-] pookieinc|10 years ago|reply
However, It's funny, there are so many of these collections of CSS Pro Tips, though as someone who writes CSS, I feel the complexity is not in these general rules, but lies more in how CSS is organized for readability, how to write _composable_ and _reusable_ CSS components, and the like.
I'd love to see more articles on how people organize their CSS (either with BEM, SMACSS, or other creative frameworks), or how they create reusable CSS components to effectively add to an overall styleguide, rather than one-off tricks. Or how to reduce unused CSS clutter, or make _huge_ performance gains by doing certain things.
A few weeks ago, I came across this great article by @fat [1] and I think this is infinitely more helpful for the common beginner than a few tips. Using :not in CSS, vertically-aligning items, or making comma-separated lists using pseudo-elements may be helpful, but those can be easily Googled.
[1] https://medium.com/@fat/mediums-css-is-actually-pretty-fucki...
[+] [-] chasingtheflow|10 years ago|reply
[+] [-] kelukelugames|10 years ago|reply
[+] [-] she_moves_on|10 years ago|reply
[+] [-] acconrad|10 years ago|reply
[+] [-] quakenul|10 years ago|reply
Being pro in css however lies within writing readable, maintainable, well documented css and these tips focus on none of that and will not make you any more or less pro than you were before reading them :)
[+] [-] mcdoh|10 years ago|reply
[+] [-] simonlc|10 years ago|reply
Code maintainability is #1 in css, and is the hardest thing to do. The main focus should be on that, and not trying to be clever or tricky.
[+] [-] bshimmin|10 years ago|reply
Watch for some buggy behavior with flexbox in IE11.
"Some buggy behavior" may more or less mean "it completely doesn't work in IE11" (which still has very significant market share) unless you start researching how to write cross-browser flexbox (at which point, welcome to trawling StackOverflow and feeling like you're almost back in the old days of crazy CSS browser hacks).
[+] [-] talmand|10 years ago|reply
[+] [-] LoSboccacc|10 years ago|reply
https://css-tricks.com/centering-percentage-widthheight-elem...
alas, css-tricks has it all already
[+] [-] drinchev|10 years ago|reply
Go further and investigate BEM naming conventions or better. Start creating components ( React, Web components, etc. ) that have encapsulated CSS.
[+] [-] Tloewald|10 years ago|reply
I also disagree strongly with using encapsulated CSS everywhere except for individual widgets (and even then, where possible widgets should inherit styling in a sensible way -- otherwise a list row that goes in a main window table needs to be implemented separately from a list that goes in a sidebar, etc.
What I think is bad is having a convoluted CSS hierarchy. Having one or at most a few big standardized containers (e.g. document, tool-palette, browser) which receive reused styles and inline or very local css for specific cases allows you to implement preference settings, high contrast modes, etc. This is how actual desktop applications tend to work and they're a heck of a lot more complex than most websites.
[+] [-] AllThingsSmitty|10 years ago|reply
[+] [-] pookieinc|10 years ago|reply
[deleted]