Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
The best thing I've found in CSS is still Atomic CSS. As the only front-end focused dev in a team, it's been the best methodology for managing a style guide's codebase, limiting (sketchy) custom CSS, and being compatible with JS frameworks #DevDiscusshttps://t.co/DzbTFEAGi6
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I think pre-processors make life so much easier for a variety of different reasons. I also think utility css is becoming a favorite of mine, check out @tailwindcss in that department if you haven't yet. #DevDiscuss
I love CSS. I love adding subtle animations to things like hover and focus states. It adds a nice touch.
My favorite thing I've done recently was create custom keyboard accessible checkboxes!
#DevDiscusshttps://t.co/wWLMtfSuNn
Ooh Tailwind is such a great framework, it's become my fallback CSS framework.
For preprocessors, do you think tools like custom properties or PostCSS will replace them at some point? #DevDiscuss
I think pre-processors make life so much easier for a variety of different reasons. I also think utility css is becoming a favorite of mine, check out @tailwindcss in that department if you haven't yet. #DevDiscuss
I know enough to be dangerous with CSS on a day-to-day basis. My work has me in Material though. I like the look, but it can be tricky to customize. #devdiscuss.
Honestly it's more important to know the basics and methodologies than the frameworks. Especially since if a project uses a CSS framework long enough, 80% of the time later on you'll want to remove it. And maybe hurt it. #DevDiscuss
I feel like I'm okay at writing CSS in general, but I have a hard time making use of the latest and greatest. I'm constantly coming across things I had no idea existed. #DevDiscuss
Animations in CSS have really gotten my attention lately. There are some very cool ones out there. Anybody seen the login one that watches as you type? #DevDiscuss
My only stresses with CSS are balancing wanting to use the latest and greatest things (like Flexbox and Grid), and my current job's need to support older browsers like IE11.
I still have nightmares over flexbox layout bugs...#DevDiscuss
This is a great question. I could see PostCSS doing that but I guess time will tell. I think CSS frameworks like Tailwind make my life so much easier that I'm ok not using LESS or SASS. #DevDiscuss
I still can’t get over how great grid is. It has saved me days of work and really made our layouts much cleaner & easier to maintain. I’m forever grateful to @jensimmons & @rachelandrew for their extensive tutorials, blogs, resources, etc. on grid adoption. #DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I feel like I'm okay at writing CSS in general, but I have a hard time making use of the latest and greatest. I'm constantly coming across things I had no idea existed. #DevDiscuss
I actually use Tailwind for my personal site haha. Just be sure to trim down the config, otherwise your compiled stylesheet is way overbloated. #DevDiscuss
Yeah, I think preprocessors are at risk of being outplaced, but it'll be a while. From what I know about them right now though, it's real unlikely. #DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I'm glad to be spreading word of @tailwindcss in this #DevDiscuss, especially if it gets more people into Atomic CSS. Of all the CSS methodologies, it's been the most efficient and usable.
I used to think CSS was just styling of websites, but I'm now so in awe with animations and their capabilities. Whenever I'm trying to show someone how versatile and powerful CSS is, I show them this pen: https://t.co/gotIKKylVi#DevDiscuss
I've just recently learned about utility-first CSS, and found out that it's related to atomic CSS. Still not sure if I'll use a framework for it in a project ot practice or make my own though... But if I do make it on my own, not sure if I'll do it correctly 😆 #DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
One of my favorite newsletters to get is CSS Animation Weekly by @cssanimation The sheer creativity is inspirational. I hope to get better at my animations and transitions in 2019. #DevDiscuss
I don’t know much about CSS but I know enough to respect those people who know it well. Be it SASS, LESS, grid layout, whatever the new hotness is. Much love to those people who are masters of the craft. #Devdiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
Back when I started in web development, I knew very little about backend development compared to my teammates, but I was willing to do the stuff no one else wanted to do: CSS. It opened doors for me later on. #DevDiscuss
Tailwind is especially great when paired with PurgeCSS, which removes unused classes. You can a great site with just a few kilobytes of CSS in the end. #DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I've also learned how to use preprocessors for other past projects... but I find myself going back to just writing all the CSS on my own 🙈
I think I need to learn how to incorporate using preprocessors when making web projects for the sake of efficiency. 😅 #DevDiscuss
Tailwind is especially great when paired with PurgeCSS, which removes unused classes. You can a great site with just a few kilobytes of CSS in the end. #DevDiscuss
Back when I started in web development, I knew very little about backend development compared to my teammates, but I was willing to do the stuff no one else wanted to do: CSS. It opened doors for me later on. #DevDiscuss
You should take a look at all the pseudo classes and selectors if you haven't. There's ones we have seen like ::before and :hover, but you might surprised to find some cool newer ones.
#DevDiscuss
I've also learned how to use preprocessors for other past projects... but I find myself going back to just writing all the CSS on my own 🙈
I think I need to learn how to incorporate using preprocessors when making web projects for the sake of efficiency. 😅 #DevDiscuss
You should take a look at all the pseudo classes and selectors if you haven't. There's ones we have seen like ::before and :hover, but you might surprised to find some cool newer ones.
#DevDiscuss
#DevDiscuss
Currently reevaluating everything I know about CSS while switching to component-based design in Angular. The local scoping of styles challenges a lot of assumptions that my old stylesheets made.
Same here. I'm only learning how to incorporate /actual/ animations when building web pages now.
I currently have an unfinished class under @cssanimation on animating hero banners... Need to get back to that soon! 😅#DevDiscuss
I remember the first time I tried FlexBox. I thought it was magic. Then I took a free CSS Grid course and thought, "The web should have worked this way in the first place!" #DevDiscuss
Agree with this! Something I recently learned to style is ::placeholder 😆 I've yet to learn what other pseudo classes and selectors are there just hiding in the open :)) #DevDiscuss
You should take a look at all the pseudo classes and selectors if you haven't. There's ones we have seen like ::before and :hover, but you might surprised to find some cool newer ones.
#DevDiscuss
My recommendation is starting slow, and only using their capabilities as it makes sense. Otherwise it can be really overwhelming. Mixins in SASS are a game changer. #DevDiscuss
If you don't know CSS animations, at least know transitions. It was enough to convince my CSS-illiterate coworkers that I had animation powers, and it helps with so many UI interactions #DevDiscuss
I really like the grid-template-areas property. It allowed me to avoid unnecessarily using an element as an empty "cell" in a flexbox layout and opt for a more simpler layout with CSS Grid. https://t.co/IBAVNm8xS0#DevDiscuss
Yeah, first time I went in learning SASS for a past project intimidated me... maybe the reason why I haven't gotten back to it yet hahaha but I see the magic of mixins in lots of articles I find online! #DevDiscuss
I’ve been messing around with CSS Grid a lot for the past few months and can really see it changing the game with how we think about layouts. It’s made me think a lot about writing more semantic HTML and not filling an app with random divs #DevDiscuss
I think we in #DevDiscuss deserve credit for discussing the different ways we've found CSS awesome, not the stresses of dealing with people who claim CSS isn't a real coding language.
For the record, it is. Enough people have done horrible things for it to be a real language.
I've been using them a lot more in items that I am not using SCSS. I haven't really combined concepts yet! I've heard it's really neat with JS though, thanks to @wesbos !
#DevDiscuss
That's a very good sign, since that's the main reason it was made. Especially great is how display and element order can be made totally separate #DevDiscuss
I’ve been messing around with CSS Grid a lot for the past few months and can really see it changing the game with how we think about layouts. It’s made me think a lot about writing more semantic HTML and not filling an app with random divs #DevDiscuss
Modern styling methods such as CSS-in-JS are not excuses for not learning CSS to its fullest extent. The better you are at vanilla CSS, the easier it will be to architect and maintain a project.
Take advantage of the cascade. It's your friend for reusability.
#DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
A good thing about Sass is you can use it to any measure you want. Sass can be written as close to regular CSS as you want, so it's easy to lean into more. #DevDiscuss
Yeah, first time I went in learning SASS for a past project intimidated me... maybe the reason why I haven't gotten back to it yet hahaha but I see the magic of mixins in lots of articles I find online! #DevDiscuss
Yes, 100%! My team has a standard transition we apply to most hover effects and I always am reminding our jr devs to include them proactively. It makes such a huge difference when colors, backgrounds, etc. smoothly transition. #DevDiscuss
This is more of a modern CSS tooling than modern CSS, but I went with CSS modules in my site upgrade. I was using styled-components at my previous work and really enjoyed it, but thought it would be fun to take CSS modules for a spin again. https://t.co/XaTTmOccX4#DevDiscuss
I feel like CSS modules are overlooked in the whole CSS vs JS debate.
➡️ You write .css files
➡️ Can use preprocessors like Sass
➡️ Encourages flatter CSS (like BEM and similar conventions)
➡️ But you can still use the cascade
➡️ Unique class names
➡️ Tree-shaking
➡️ .css output
I use them in combo with SCSS variables. My favorite trick is saving my current breakpoint in a CSS variable and then accessing it from JS. Now I can set my breakpoints in one place and forget about it, while making them accessible project wide. #DevDiscuss
I think we in #DevDiscuss deserve credit for discussing the different ways we've found CSS awesome, not the stresses of dealing with people who claim CSS isn't a real coding language.
For the record, it is. Enough people have done horrible things for it to be a real language.
This isn't a modern CSS thing. However, as an accessibility person, I want to remind #DevDiscuss to check your contrasts! You don't want to alienate your colorblind or visually impaired users with gray on gray!
https://t.co/7mkQsMtl9L
CSS Grid and Flexbox are just so dang useful and fun! Both have taken a lot of the headaches around responsive layouts that I used to run into with floats and positioning. @jensimmons Layout Land video series is super helpful: https://t.co/7nsk2ZtBcS#devdiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
Speaking of CSS-in-JS (queue the Twitter debates), I absolutely love styled-components. It feels natural as you're still writing plain CSS, supports media queries and animations, and integrates perfectly in React by exporting components.
#DevDiscusshttps://t.co/AwjuLy4Xo4
Oh man, I have to remind my coworkers about contrast so much! It was to the point where I used Sass to make helper classes that would automatically set background colors and text colors that had enough contrast for #a11y standards #DevDiscuss
Yeah, my big worry is that CSS in those projects aren't given the attention they deserve. Neglected, rushed CSS comes back to bite so many projects years later it's not even funny.
Well, I personally find it funny sometimes. #DevDiscuss
One thing I've realized is that as someone who learned Bootstrap as the first way of styling the web, things like CSS grid and flexbox make a lot more sense to me than traditional layouts.
#DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
My favorite new things in CSS are grid, conical gradients, background-blend-mode, and shape-outside. Finally starting to break that boxy, "all websites look the same" feeling
#DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I love how versatile CSS allows you to be. You can use it for styling, animating, making art and so much more! This pen by Julia Muzafarova is the one of coolest pure CSS animations I've seen https://t.co/EXcvDIBv1O#DevDiscuss
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
I am also very appreciative that we are finding ways to do animations and transitions in CSS rather than in JS. Performance-wise, it is pretty neat. #DevDiscuss
To set the size to be referenced later, I just apply it to the :root selector. So it looks something like this
:root {
@each$size in $sizes {
@include breakpoint($size) {
—breakpoint: #{$size}
}
}
}
$sizes is an array (‘small’, ‘medium’, etc)
#DevDiscuss
In reply to
@ChiSenires, @littlekope0903, @wesbos, @Media, @each, @include
As a backend Site Reliability Engineer I have never even thought of the performance implications of CSS vs JS animations. TIL! https://t.co/sxwD9UYSxT#DevDiscuss
Where I am, the initial CSS was first written by a designer for "proof of concept," but it wound up being the main CSS base. It still gives programmers, including me, nightmares to this day #DevDiscuss
I like that it also helps keep code organized. If I can accomplish a transition or animation by using JS to modify a class, it keeps all of the appearance stuff separated in the CSS. So much better than trying to remember where it was set. #DevDiscuss
A good question I think as the CSS #DevDiscuss is winding down: what advice would you give to people starting to learn CSS, or more advanced CSS tools/powers like Sass or Grid?
Unpopular Opinion: CSS is the hardest.
Debugging JS? Cool, look at the stack trace in the console.
Your site looks weird? Ugh, good luck mixing and matching thousands of properties together and then finding out that the one solution isn't cross-browser ¯\_(ツ)_/¯
#DevDiscuss
Layout Land, a YouTube channel by @jensimmons, https://t.co/fyIIAIcS4u . I've only seen one video so far as there's so many learning resources to view/read/listen to, but I'm definitely going to watch some more of this channel in 2019. #DevDiscuss
Mine is don't let either the tricky stuff or the naysayers get you down. CSS packs lots of power once you learn it, and can do as much good (or bad) for a site as any other language. Always know good CSS can be the backbone of any site #DevDiscuss
A good question I think as the CSS #DevDiscuss is winding down: what advice would you give to people starting to learn CSS, or more advanced CSS tools/powers like Sass or Grid?
Learn about inheritance and specificity. Don't let people tell you CSS is easy. It's not and I think this myth is what generates so much hate for it. The more you simplify your CSS the more your future self and other devs will thank you!
#DevDiscuss
A good question I think as the CSS #DevDiscuss is winding down: what advice would you give to people starting to learn CSS, or more advanced CSS tools/powers like Sass or Grid?
I got out of front-end development for devops but have been building a site for a friend and I love getting backinto CSS. It might be the best part of building a site #DevDiscuss
I have an unrelated confession: I never used tweetdeck before tonight, and it has really changed the #DevDiscuss experience for me. I'll have to write about it this week. Goodnight, coders!
Time for #DevDiscuss
Tonight's topic is *Modern CSS*
Let's get the conversation started
- What is the latest and greatest in CSS?
- What's the most interesting thing you've seen done in CSS lately?
- Where does true CSS stand in relation to other forms of web styling?
1) Learn basics
1a) Please, and I mean PLEASE do not get in the habit of using !important
2) Experiment in something as non-consequential as CodePen
3) Sass is a tool. Learn the why behind it.
#devdiscuss
If you're new to CSS altogether (or coding in general), don't automatically copy experienced folks and treat it as best practice. I think CSS is notorious for older dogs not learning new tricks.
Experience is great, but you can skip the some of yesterday's hacks. #DevDiscuss
A good question I think as the CSS #DevDiscuss is winding down: what advice would you give to people starting to learn CSS, or more advanced CSS tools/powers like Sass or Grid?
Some last #DevDiscuss thoughts. CSS is hard, but rewarding. It gives you immediate visual feedback on what you’re doing. It’s a great feeling literally watching a mock-up or idea in your mind come to life on the screen.
I don't think I can stress this enough, please do not get in the habit of using !important. #DevDiscuss
With that, I'm going to bed to make sure that this headache goes away.
Learn the basics of inheritance in CSS as well as how rules are evaluated. Outside of that, I think folks should look at how they can organize CSS well using whichever method they prefer. #DevDiscuss
A good question I think as the CSS #DevDiscuss is winding down: what advice would you give to people starting to learn CSS, or more advanced CSS tools/powers like Sass or Grid?
Shout out to all of the awesome CSS folks out there, keep being awesome! Also, check out my weekly Learn By Doing newsletter (built with Tailwind) and sign up to get it in your inbox each week. https://t.co/dGe4l4P31H#DevDiscuss
I've been using Gatsby for a while now for my blog, but I'm happy with the recent addition of netlify-cms and also recently migrating it to TypeScript. https://t.co/zEp1wIFwx0#DevDiscuss
Alright, got my @gatsbyjs site migrated to TypeScript. Pretty happy with the result. For those interested, check out https://t.co/fGUCMqvRaI . I'll probably write a blog post about it in the next week or so. #reactjs#TypeScript
