Dark Theme | Category: Boot Camp Diaries
The Boot Camp Diaries Week 11: CSSomebody Save Me
.helpme {
background: I’m good at CSS but it’s a pain;
display: Oh man I hope it’s decent;
}
CSS is not something we learned at boot camp. It was part of the pre-work, sure, but CSS is one of those things that’s pretty simple and yet so involved that it takes time and lots of repetitive practice before you can do it quickly and have a pretty good idea of what the page is going to look like without having to refresh every two minutes. My lightning-quick CSS skills drew a few comments from my pair coding partners in the early days of boot camp, many of them along the lines of “How do you have all that memorized??” The simple answer is, when you’ve banged out a box shadow or a border radius or mocked up a nav bar thirty million times, the properties and values just start sticking in your head. I wish I could kick them out and replace them with more useful information, like map function syntax in Ruby or regex in JavaScript, but it is what it is.
During week 11, I took over CSS duties for our group simply because I had the most experience with it and could bang it out pretty fast. There was a lot to do, so even with my relatively quick speed, it took me all week and prevented me from focusing on things I actually wanted to practice, like routing paths in rails and writing fetches. It was still fun, though, because I pushed myself in little ways to try new and more advanced techniques, and when my teammates came up with “Ooh can we do…” ideas, I always said yes and I always made it happen. CSS feels like something that’s good to know even if you don’t want to focus on it or make it a huge part of your future – like changing a tire. I’d rather be able to call AAA, but in a bind, it’s comforting to know I can do it myself.
As a parting gift to you, I will share with you my three property/value CSS combos, promising nothing about cross-browser compatibility.
One:
margin: 0 auto;
My first love. As long as your element has a defined width, this baby will center it. If you have an <img /> that’s being obnoxious, wrap that baby in a <div> and use this. Piece o’ cake.
Two:
width: max-content;
This fits the width of your element based on the exact width of the content inside of it, which is super handy for responsiveness and text content that may change from time to time.
Three:
transition: ease-in-out .2s;
I use this most for hover animations. Use it on the original element, not the :hover element. It tells the effect to ease in over a time span of .2 seconds when the mouse enters the element and to ease back out over that same .2 seconds when the mouse leaves. You can obviously adjust the timing, but I find .2 is my personal fave.
</ XOXO >
[Photo credit: Adi Goldstein via Unsplash]