CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design.
Foreword by Chris Coyier, Cofounder of CodePen.
Dig even deeper into the secrets of CSS with our video course CSS in Depth in Motion , available exclusively at Manning.com (www.manning.com/livevideo/css-in-dept...)!
Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.
About the Technology
Some websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them!
About the Book
CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom this book will make you a better web designer and your apps will look fantastic!
What's Inside
About the Reader
Written for web developers who know the basics of CSS and HTML.
About the Author
Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site.
CSS in Depth is an excellent book. It is a code-along experience with its examples and resources over on github (https://github.com/CSSInDepth/css-in-...). In this book, I learned more about HTML, CSS, and even some more about JavaScript. It is one of the best kinds of books on web development. I recommend it highly.
It starts with the most essential components: cascade, specificity, inheritance, relative units, and the box model. These fundamentals are often easily missed when a web developer is teaching oneself. Locking in these fundamentals really sets the stage for success. As a full stack developer with over 7 years of experience, I greatly appreciate this part of the book. So many bad habits in web design form out of a lack of knowledge on the core CSS rules. This section showed me my own bad habits (especially in the area of specificity) and helped me to understand the core of CSS much better.
After that, the author goes over layout techniques, from floats to flexbox to CSS grid, as well as responsive design. These are vital for any web developer when building modern web applications and when considering what browsers they are going to support. I found this section to be useful; at the same time, knowing how many different ways people have come up with techniques to lay out the web is both impressive and frustrating. Fortunately, we are at a point in the history of the web that old methodologies (table-based layouts, display table layouts, and float-based layouts) are becoming a relic of the past. Even legacy browsers like IE have some support for more modern layout techniques. This section is like the best kind of history lesson: it makes sense of the present by explaining the past and showing how far we've come. Good stuff.
Then, the author talks about CSS at scale. I work on an enterprise web application, and I believe the author has done us a favor by covering this topic. So often, when multiple teams work on disparate projects or even on one large project together, CSS gets duplicated, and maintaining these systems can be a big headache. Keeping web application CSS organized and intentional (using an organizational practice such as BEM) and providing a pattern library can go a long way to encouraging CSS reuse and making an enterprise web application more successful. With that said, I think these techniques should be a part of any web developer's toolkit, since they foster collaboration. Great section!
The final section of the book goes over what the author calls Advanced Topics: backgrounds, shadows, blend modes, contrast, color (HSL, anyone?), spacing, typography, animations, the list goes on. I enjoyed this section quite a bit, because coding along with the book and watching the different techniques in action feels good.
I took a very long time to read this book. I read sections in bursts, and I spent time thinking about and applying what I learned during the workday. I even did side projects where I applied what I learned. I don't have a recommendation as to how quickly you should read this book. It depends on your best way to learn. With that said, if you choose to read this book, I do recommend you type up the examples he provides and run them on a web browser.
While reading, I followed along with VS Code, a free development application that is somewhere between a text editor and a full IDE. It's awesome, and unless you have a preferred code editor already, I highly recommend it. I was throwing down new web applications left and right during the book, and I used the "Live Server" extension, as well as Emmet snippets, to quickly get from the written page to the rendered web page ;)
I remember the author tweeting about being in the process of writing this book. I was excited at the idea of this book and felt like a modern publication on this topic was desperately needed. Well, I'm done reading it, and it was well worth my time. I keep a copy on my row at work, and I share it with my teammates so we can all learn from it. I'm sure I'll be reading it again in the future.
As a final note, I like the author's teaching style. I would really like to see an online learning resource that teaches the way this book does and provides many, many more full example projects, more than a book could reasonably provide. Coding alongside the author was vital. It gets CSS into your fingers and gives you your own internal understanding of it all. Read the book. Make awesome web stuff. You can do it.
First time reading a CSS book in around 17 years, which means I managed to skip the clearfix entirely. Feeling blessed.
This book explains the state of modern CSS clearly and comprehensively. As such, it is almost certainly the least interesting book I've read this year, but it is nonetheless very useful. Recommended if you need to improve your understanding of CSS.
I am in need of updating my skills and understanding of HTML and CSS from what I picked up during the days of Web 2.0. For that purpose, I found CSS in Depth to be the right book. It is not geared toward novices and as such the presentation is fast and relatively succinct but that's exactly what I wanted.
The author does a fine job explaining the nitty-gritty of element positioning, which has always been a pain point for those who have not spent time learning how exactly CSS works. He then introduces how the newer features like flexbox and grid layout are designed to help where floats came short. With the knowledge, I could update my personal web site with responsive design in no time. The book also introduces good practices on modularizing CSS code for collaboration and scaling in mind, as well as more advanced topics like visual accents, coloring, typography, as well as animation.
While it is not designed as a reference or a cookbook and that probably reduces its utility over the long term, the code is self-contained and presented in a way that using as a refresher is easy. Overall I am very satisfied with it and glad that I picked up the right book at the right time for myself.
`TL;DR Highly recommended for its broad coverage of the CSS language, as well as its coverage of new and emerging CSS topics. The engaging practical exercises made it a consistently enjoyable read, as well as being informative and valuable.
My career more or less started working in back-ends. I was a Java-first engineer when I started out, and only occasionally had reason to fix a bug or something on the front end. So when I transferred to Sydney and started working in JavaScript, TypeScript and React a lot more, I just kind of picked up things as I needed them. I was working with JavaScript a lot, so I had many opportunities to learn there, and when we picked up a TypeScript project, the same was true. But I still had very little interaction with CSS — enough to do the work that came my way and design some components, but not really enough to claim to "know" CSS. I'm someone who likes to know their tools. I figured it would be wise, in the few weeks I have before I return to work, if I committed some time to getting to know the language a little bit better.
I chose Manning's CSS In Depth by Keith J. Grant. I found this book to be really valuable. It's well-organized and easy to follow. It features a steady stream of practical examples that demonstrate various CSS features and keep the pace engaging (and maybe even fun?).
The book covers a lot of ground, in roughly four sections:
The first section covers CSS basics. This is mostly material I knew, but some things were clarified for me here, particularly in understanding how conflicts between selectors get resolved. It also highlighted some gotchas working with shorthand notations that I didn't know about.
The next section covers layout. This is where I expected to find the most value, and I did find a lot of value here. I feel much more confident working with flexbox. I feel I can hold my own working with grid. And position (fixed, absolute, relative, etc.) is much clearer to me. There was also a good discussion of responsive design that put some new tricks in my toolbelt (auto-scaling fonts with min/max sizes are pretty cool).
Part 3 is the part I didn't know I needed. A lot of this covers how the CSS standard is evolving to embrace features originally introduced by CSS preprocessors. CSS layers give you another mechanism for controlling how the cascade resolves a conflict between selectors. Container queries let you scale responsive elements according to their container size, rather than the size of the entire viewport. Scopes might be my favorite: they give you much the same advantages of the BEM convention, limiting your styles to where you want them to go. But they also allow you to specify a lower bound beyond which your styles will not apply. So if you're defining a module meant to contain modules, you no longer have to be quite so careful about how your selectors apply within that scope. It's pretty cool, and it was fun to read about and use.
Having read part 3, I now feel that CSS preprocessors are nearly if not entirely obsolete. Reasons you might still use a CSS preprocessor: • Some features described in the CSS standard are not yet supported in all browsers — a CSS preprocessor using equivalent features will output CSS that is broadly compliant
• there may still be a few properties that require vendor prefixes — a CSS preprocessor can take care of these transparently • merging disparate CSS files into a single artifact (but a bundler will do this, too) • named breakpoints for responsive sites (CSS custom properties are not in scope for media queries)
That's kind of it. Armed with that knowledge the question of whether you need to be using a CSS preprocessor seems to me less of a slam-dunk than it used to be.
Part 4, in the author's estimation, is the "fun" part. I'm not sure I agree. It covers the elements that will please folks a little farther towards "designer" on the "designer/engineer" spectrum than I am. Still, it's good to know about some of the color, typography, and mask/clipping features that I didn't really know much about before. And the discussion on the newly supported wider color spaces was pretty interesting.
Nearly last, Part 5 covers motion (and by association transforms). This also felt a bit more on the "designer" side of things for me, but certainly I can see the value of using motion to communicate with the user in an intuitive way. And it's good to know the performance benefits of using transforms over position properties (and, at a high level, why they perform better).
Last come two appendices: one that discusses selectors, and another that summarizes CSS preprocessors and compares two leading implementations. I was a bit surprised to find the discussion of something as fundamental to CSS selectors relegated to the appendices, and not right up-front in the "basics" section, but I can kind of see why he did it that way. They don't really require much explanation and a list of selectors and selector components, coupled with their regular use throughout the book, seems an adequate exposure to the topic.
Having read this book, I do not necessarily feel I'm a CSS expert. But I do feel armed with the knowledge I need to tackle projects that will help me to become one. I feel much more prepared to engage with CSS. I feel like I could recognize some not-very-good CSS and refactor it into something better, rather than just timidly adding my changes to it while trying not to break anything. What's more, the book was pleasant to read, and I found myself multiple times doing that "just one more chapter" thing that I used to do with novels, when I still read novels.
If you're a CSS novice, or you just want to get exposed to some of the new features, you could certainly do worse than this book. I do recommend it.`
This book is not bad, I guess I liked it as it really taught me something. Why do I give it 4 stars? For me an essential part this book missed is comparisons, benchmarking and some advices. It tells about floats and flexes, but it does not explain how much flexbox is more performant and why we should use it. There is also a chapter about animations but no word about how to write performant animations and not laggy ones. On the other side this book does provide tips and tricks about how to make things done the right way so on the whole I'm satisfied I have read this book.
There are plenty of really helpful secrets to become better developer, can't say it's brilliant, sometimes it lucks some examples as for me, but still it's a mustread for all the interested people. I recommend it to my friends and recommend to all of you.
Almost tempted to read it in one sitting. It is that good, whys and hows in one neat package. Can't wait to read the second edition when it is finished.
I would rarely read a book CSS, as most of the books on the subject are either outdated or just have poor content but “CSS in depth" is an exception. The author presents each concept clearly and provides accompanying code examples, making the book a valuable resource for both experienced developers and those new to the subject.
Done for now. I decided to read this book because I self-taught css and wanted to learn industry best practices. Though technologies have innovated since this book was published in 2018, its lessons are still relevant.