{"id":19918,"date":"2013-01-20T12:37:46","date_gmt":"2013-01-20T19:37:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=19918"},"modified":"2019-11-11T08:45:51","modified_gmt":"2019-11-11T15:45:51","slug":"css-for-babies-a-critical-analysis","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-for-babies-a-critical-analysis\/","title":{"rendered":"CSS for Babies: A Critical Analysis"},"content":{"rendered":"

The following is a super-duper serious critical review of the book CSS for Babies<\/a>. Super. Duper. Serious. <\/p>\n

<\/p>\n

I’m afraid even the title of the book is an invalid CSS style declaration.<\/figcaption><\/figure>\n
Are we capitalizing tag selectors now? That’s just weird. And type=”text\/css”? What is this, 2010? And is there a space in the file name or not? I need to know, I’m following along at home here.<\/figcaption><\/figure>\n
Didn’t we just learn what a selector was and that declarations have them? And what’s with #fffff. Baby is going to be learning to read here soon and that’s just confusing. I would have gone with, oh, maybe “white”.<\/figcaption><\/figure>\n
Points for font-size eh? Are you just trying<\/strong> to cause your baby cross-browser testing pains? And I can’t even tell you the last time I used :link<\/code>. My links are links. And I think your syntax highlighter is broken.<\/figcaption><\/figure>\n
Presentational class names. Perfect. Especially when it doesn’t do the styling the name implies it does.<\/figcaption><\/figure>\n
All navigation has to be in a list right? And you’re pretty sure you want to repeat the tag name in the identifier right? And you’re pretty sure you’ll never, ever use something like a navigation list on a page more than once right? And that set height on a text element. That’s almost always a good idea.<\/figcaption><\/figure>\n
Makes sense to still keep teaching proprietary non-standard IE filters for sure for IE 8 and down for sure. By the time your baby is old enough to use a mouse it’ll be irrelevant but that’s OK. And you might as well set it to its default value too. Keep that code light!<\/figcaption><\/figure>\n
Tag qualified<\/strong> presentational class names! Even better! And mixing unit types for related properties! And that width? That’s approximately 10 physical miles \/ 16 kilometers.<\/figcaption><\/figure>\n

lol jk. I think this book is hilarious and makes a great baby gift<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The following is a super-duper serious critical review of the book CSS for Babies. Super. Duper. Serious.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":335231,"url":"https:\/\/css-tricks.com\/smolcss\/","url_meta":{"origin":19918,"position":0},"title":"SmolCSS","date":"February 24, 2021","format":false,"excerpt":"A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become. Random things to note! The resizeable containers aren't some JavaScript library. They are just

s with resize: horizontal; and overflow: auto;\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-22-at-4.29.21-PM.png?fit=1200%2C684&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333018,"url":"https:\/\/css-tricks.com\/scrollbars-on-hover\/","url_meta":{"origin":19918,"position":1},"title":"Scrollbars on Hover","date":"January 20, 2021","format":false,"excerpt":"First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I'm going to cover the idea of only revealing them on hover. Even macOS itself\u00b9\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/scrollbar-hover.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367403,"url":"https:\/\/css-tricks.com\/quick-tip-clear-vs-code-cache-for-open-files\/","url_meta":{"origin":19918,"position":2},"title":"Quick Tip: Clear VS Code Cache for Open Files","date":"August 11, 2022","format":false,"excerpt":"If you use VS Code, you might have enabled the setting for re-opening a previously open file next time the app launches. I do. I like that. Hey, thanks for remembering, buddy! \ud83e\udd17 But sometimes you really, really don't want that to happen. I recently ran into one of those\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/vs-code-open-last-file.png?fit=1003%2C563&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375714,"url":"https:\/\/css-tricks.com\/so-youd-like-to-animate-the-display-property\/","url_meta":{"origin":19918,"position":3},"title":"So, you\u2019d like to animate the display property","date":"December 15, 2022","format":false,"excerpt":"The CSS Working Group gave that a thumbs-up a couple weeks ago. The super-duper conceptual proposal being that we can animate or transition from, say, display: block to display: none. It\u2019s a bit of a brain-twister to reason about because setting display: none on an element cancels animations. And adding\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175386,"url":"https:\/\/css-tricks.com\/authoring-critical-fold-css\/","url_meta":{"origin":19918,"position":4},"title":"Authoring Critical Above-the-Fold CSS","date":"July 14, 2014","format":false,"excerpt":"The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being \"critical\" - the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":161608,"url":"https:\/\/css-tricks.com\/international-box-sizing-awareness-day\/","url_meta":{"origin":19918,"position":5},"title":"International box-sizing Awareness Day","date":"February 1, 2014","format":false,"excerpt":"It's February 1st today, which I've decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing. The date corresponds to Paul Irish's post where he introduced the concept of using it on every single element\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19918"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=19918"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19918\/revisions"}],"predecessor-version":[{"id":298693,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19918\/revisions\/298693"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}