Pratique du Shadowing: 5 CSS fouls that I see way too often - Apprendre l'anglais à l'oral avec la vidéo

Hello my friend and friend.

Today we're looking at five CSS files

that I see even seasoned developers make including myself and we're starting off with the first one which is useless declarations.

And I've seen this more and more with the rise of AI because it likes useless declarations.

And the one I always like to use here is a width of 100%.

People like declaring 100% or even 100vw for the times where they want it on the body, which as you might see can cause horizontal overflow especially

if you have fixed scroll bars like windows users have on chrome though

that is potentially getting fixed but we're not quite there yet

but i'll put a link to a bramis article

that talks about how you can actually get 100 vw to take into account the scroll bar

which is kind of cool but 100 is something i see people declare

when they don't need it because as you can see in the two divs

that are up there they look exactly the same

and they work exactly the same they're going to grow they're

going to shrink they're going to match the parent even

if we just have have a width of auto

and you don't need a width of auto

because that's just what it does by default

and it seems like it's the type of thing

that won't actually cause a problem but in some places like

if it's a flex item it could potentially get in the way with grid it could potentially cause overflows

or if you add margins on these it can as well

so let's just add a margin margin to the left side of both of these

and i don't know make 100 pixels or something and

if we take a look at what that's done the one that's auto width has not caused any problems

because it just takes that margin into account, whereas now we have 100% plus the margin on the side, and all of a sudden we have an overflow, and that sucks.

You may be going, well, Kevin, that's because you didn't declare a box-sizing border box.

It has nothing to do with that.

Box-sizing border box.

If I do that, it doesn't change anything, because box-sizing border box goes up to the border.

Margins are on the outside of the border.

The size of my box isn't going to be influenced by margins in any way they're always tacked on afterwards.

So just don't declare width on something if you don't need to.

And in the similar spirit of that, we're going to look at this one, which I guess is a useless declaration,

but it's also about working with how the browser wants to work in the first place.

And it's when we get overly prescriptive, because sometimes you might want a height on something, you need to have it.

So you declare a height of 250.

I know this is like a simple example, so you might know like, oh, we don't want to do that because it overflows.

Whereas the auto one just works

because auto on width wants to be as wide as possible

auto on height wants to be as short as possible

but it automatically adapts to the content that's in there

if the content needs more room it will grow to adjust

which is fantastic

so as much as possible we want to lean into these default behaviors it makes our lives a lot easier

and it just makes things a lot more adaptable in general

but sometimes you do need to have something in place so

if you do need something in place that's where you want to work with how the browser's already trying to work.

In this case, it's trying to be as short as possible.

So I want to set a constraint on that.

I want to prevent it from getting too small.

So instead of a regular height, I could come in and say this is a minimum height.

And now it's going to be at least 250.

Let's do 350.

So we actually see a change here.

And so we get a height of 350 as the minimum size, but it's still going to adapt if it needs to adapt and grow and shrink and grow and shrink and everything works.

So we're still working with the way the browser wants to work with it, but we're setting the constraint.

I'm repeating myself a little bit, but I really want to hammer that home.

And if you really want this hammered home more, and these are the types of things that do trip you up, or just CSS in general is something that you were frustrated with,

I want to let you know that I'm doing a completely new version of CSS Demystified, which is my flagship CSS course.

I'm redoing the entire thing.

I've put a waitlist now on the page.

The link for it is down below.

And the first module is called the CSS Mindset.

So we have a whole bunch of lessons

that are just dedicated to working with the browser

and understanding why we need to do it and everything that has to do with that.

And from there, we're going to get into layouts, grid, flexbox and all sorts of fun stuff.

If that sounds interesting to you, check out the link in the description.

And just to sort of go back into this part for one second

or maybe back to this example where we were dealing with the widths.

The same type of thing can come in.

Like here I have a container.

I've set a width of 60%, but a lot of the time you won't do 60%.

You might say, I don't know, 600 pixels.

You don't want to do that, right?

Because 600 pixels means it's going to overflow.

It's also take off this margin left here.

So now it's just locked in at 600.

It wants to be as wide as possible.

We don't want it to get that big.

So we want to once again set a constraint.

But this time we want to set the constraint as a maximum.

So we can use a max.

I've got to spell it correctly.

But we want to throw a max width on there instead.

And now it actually isn't causing any overflow.

I'm actually just going to go on the body.

So you can see this we'll do a margin or say a margin of 10 pixels or something.

Just because my outline on the sides was shooting off the side.

Now we can see that it's actually shrinking down.

Whereas if I just did a width on there, it's actually overflowing and we're getting some side scrolling.

So yeah, working with the browser is just the most important that we can do.

Try and remember what the browser is trying to do

and then just work with those behaviors and you're going to save yourselves a lot of headaches.

And now for point three, it's something that I'm 100% guilty of, which is staying organized and taking the time to refactor sometimes.

And this is an example of, this is the live version of my website right now.

I created a link button component and I have a fancy button component.

The fancy button is a fancy looking button.

100

If we jump on over to my website, we can see them down here where it's these buttons that sort of, it follows the direction of the mouse cursor coming in and out.

101

And I wanted buttons like this and links like this

102

and the easiest thing to do at the time was to make a link version of it

103

and a button version of it.

104

And this works completely fine.

105

There's no issue with having the two components.

106

There's fancy ways we could have it adapt to which one we want.

107

But completely fine.

108

The problem is all my styles are here, and then I'm repeating most of those styles here.

109

There are some small differences between the two probably, just because one's a link and one's a button.

110

They're probably actually exactly the same.

111

But at the time, all I did was duplicate the feature I was working on and then went from there.

112

Or if we jump on over to my style sheet, I actually don't know what we're going to find here.

113

I've just been like hacking away at this.

114

I actually know there's one problem that's in here that I made because I just saw this before recording.

115

If I look in here and I find my layers, which we go down a little bit more, we'll find a layer.

116

Right here, I made a layer reset and it actually doesn't close.

117

Or it probably does eventually.

118

but I don't know where it closes.

119

I accidentally just included a lot of stuff in there.

120

So it's closing here, which is fine.

121

These are things I wanted in there

122

but at one point i was like hacking away at my heading uh my hero area

123

and for whatever reason i was like oh it goes with my h1

124

so i dropped it in there

125

but like all of this really shouldn't be part of my

126

reset right uh even this anchor name i don't think the

127

viewport one i think we can leave there i don't even think i need

128

that i stopped using that uh oh we have more here actually that we need.

129

So this one maybe I could keep up in the reset.

130

Probably not, but you get the idea that I probably should have taken the time to start coming in with other things.

131

And it's one of those things that's very normal.

132

You start hacking away at stuff, you just start getting it to work, which is completely fine.

133

But then once you have it working, and sorry, I'm scrolling a lot now, I'm trying to find where I want to put this in my code base.

134

Overflow scroller, these are kind of more generic still.

135

Avatar, underline, these are all very generic things.

136

This is more layout related.

137

Maybe it's still not the best place, but I'm going to drop it here for now.

138

So I'll find a better place for it after.

139

But it's very normal just to throw things in there, get things working.

140

That's actually one of the pieces of advice, not part of the tips I have for today, but often when you're stuck on something, you're not sure where to start, the best thing to do is the quick wins.

141

Just start writing code, get the ball rolling.

142

So your sort of things are moving in the right direction, but then that often results in lots of extra stuff

143

and it's no fun refactoring and doing it

144

but you thank yourself later like right now I the reason

145

I even thought of this one was I was making changes to my fancy button

146

and I wasn't seeing those changes reflected

147

and I'm like why is this not working I even like set the background to red

148

and like it's not changing to red I couldn't figure it out

149

and like oh it's a link button and it should just have a single class in my regular CSS file

150

and not worry about it.

151

But I took a shortcut.

152

Again, the shortcut is fine, but we don't want to take the time afterward and you'll thank yourself.

153

Or if you're working in a team or something like that, especially true, but even in personal projects like this one, it's always worth the effort to actually put it in.

154

So once this video is done, I'll practice what I'm preaching and hopefully end up actually doing that.

155

And while we have my website up here, actually another one that I wanted to look at, and this would be a nice example, is if I look at my headings here, I never really earned my headings, but my navigation, you can see there's an outline coming up on those.

156

I have a few other effects in place, but I like having the outline on there, even if I don't need it.

157

But there's a lot of people you can see on this one, for example, the KP, it gets the outline on it

158

because it's a link and you can focus on it and you want to make it obvious that something can be focused.

159

But people and I get it.

160

It's usually, I think, from a stakeholder who tells you

161

that your boss or somebody who happened to click on a button and you get an outline on it.

162

So you end up with a star of outline none.

163

But the problem with this is that it makes it so when you focus on things you don't know it.

164

And I generally don't like calling out companies and stuff

165

but ESPN has a really bad website when it comes to this because if you tab through their website, you might notice, I don't know if it's on screen or not,

166

but I'm tabbing through and I see the links, they're showing up in the bottom corner for me

167

that shows me the address but you can see now the page is actually jumping.

168

I have no idea what I'm focused on.

169

And so it's just a terrible, terrible user experience for anyone who's coming in and keyboard navigating.

170

And there's lots of people who keyboard navigate.

171

There's power users who just prefer to do it.

172

NeoVim users out there know what I'm talking about, but there's just tons of reasons that someone might be using their keyboard and navigate, and they're just not gonna use your website

173

if you make it hard to do

174

which like this is literally impossible to know what I'm focused on

175

so really really bad on that front so the solution to this is thankfully very easy to do

176

uh just instead of worrying about focus just use focus visible instead uh

177

if you see here if I click on a button a button clicked on

178

if you have focus will actually gain focus uh so it gains

179

that focus state and that's the thing

180

that people especially a button that's opening a navigation or something That's annoying if it gains focus.

181

But here, the focus visible, I can click on the button.

182

It's going to do whatever that button needs to do.

183

It's not going to get a focus ring on it.

184

If I tab to that, though, you can see that it's actually getting the pink focus on there.

185

So focus visible is what you want to use most of the time, if not all the time, instead of using focus.

186

I will say it's mostly buttons where you'll see this difference.

187

If you're in form fields, whether you click or not, if you're using focus visible, it's still going to work the exact same way.

188

It's the browser deciding based on the user's primary input method as well as the type of element it is

189

And buttons for the most part of the one where you'll notice it the most often

190

But I believe in all focusable things now This is the default for the user agent styles

191

and it's the default of what I use

192

So don't worry about focus use focus visible and that way

193

if you're needing to add your own focus states and things like

194

that Just do a focus visible and you won't get those annoying things

195

that your higher-ups

196

or bosses are telling you to get rid of of leading to really bad user experiences like we saw on ESPN.

197

And the final one that I'm going to talk about is something I don't have an example for, or I have lots of examples, I guess, but it's about using the right tool for the right job.

198

And I see a lot of hesitancy for people, or not hesitancy, but it's people getting comfortable with what they know

199

and then not learning the more efficient or effective tool for the job that they're doing.

200

And this is people that learn grid really well

201

and then use it for things that Flexbox should be used for

202

and vice versa where people get really comfortable with Flexbox

203

and they start over relying on it when grid would help you out.

204

This is one of those things where I have seen AI

205

just have a tendency to rely too much on Flexbox

206

and use it for things where grid would actually be better just

207

because there's more training stuff out there with Flexbox I think

208

and there's patterns that have been created that people used Flexbox for.

209

It's more complicated the AI gets you 90% of the way there

210

but you need to make a tweak to it

211

and then the Xbox isn't actually doing the job you want it to

212

and it becomes harder to tweak whereas if you just switched over to grid it would be easy peasy.

213

If you'd like to know more about

214

that there is a video linked in the description about how

215

I make decisions on whether I should be using Flexbox

216

or grid in any given situation

217

and I know like having two layout tools can feel annoying

218

there's a reason we have both of them I addressed

219

that in that video as well but it's also one of those things

220

that you don't need to be masters of both of them

221

you only need to learn the familiar patterns with both of them and and the more you use either one of them, the better at it you're going to get.

222

But yeah, you can keep both of them fairly simple

223

and accomplish most of the layouts that you're going to need to accomplish with them.

224

And if you want to learn more of Flexbox and Grady, don't mind waiting a few more weeks until the course is out.

225

As I said, deep dives into both of them in CSS Demystified.

226

Link for that is in the description below.

227

I hope you enjoyed this video.

228

I hope you got a few tips.

229

If you have any others, please leave a comment down below to let me know what they are.

230

And with that, I want to give a very big thank you to Johnny, who's my enabler of awesome, as well as all my other patrons and channel members for their continued support.

231

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

Qu'est-ce que la technique du Shadowing ?

Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.

Pratique du Shadowing: 5 CSS fouls that I see way too often - Apprendre l'anglais à l'oral avec la vidéo

About This Lesson

Key Vocabulary & Phrases

Practice Tips

Qu'est-ce que la technique du Shadowing ?