Good day guys, css is to a website what beauty is to a woman and you cannot get away with writing bad css, i'm going to share with you some cool cs...
For further actions, you may consider blocking this person and/or reporting abuse
there's no spelling anything so the risk of making a typo is virtually eliminated. --> I would say the risk of typos is higher because emojis doesn't render the same way in all the OS so I might not see the same emojis as you and lets not forget the fact that we may not understand emojis the same way (due to different culture).
I have tried using emojis as class names in my code, i use firefox, edge, chrome, it works fine even on my android device, i still get the same results. Haven't tested it on a mac but hey these are pro tips supplied by experts.
it's not about the result of the code. It's about the code itself. Emojis don't render the same in all the OS so I may not see the same code (not the same result) and this will make it difficult to manage. We may both see a different rendred emoji and this will lead to a lot of confusion.
Check this to understand what I mean: unicode.org/emoji/charts/full-emoj... see how each emoji can have different rendring, the same can happen with your code even if it's still the same one.
media query cannot be defined with CSS variables, you can try your example. It won't work.
The reason is simple, we can easily run into undefined behaviors:
Ex:
Forgive me, i used this a lot with SCSS, i thought it has built in support for CSS..
Ok, there's a few things that need to some clarification:
variables: actually known as custom properties, are not quite the same as (for example) SCSS variables; they are scoped, can be read/modified by JS, and they can be modified after the initial render. You can use them in a similar way as typical variables, as you indicate, but they can be more!
clamp() - great, but bear in mind the lack of support in IE11 (we continue to partially support that browser in commercial projects, so some properties/functions need a little consideration). Also bear in mind that the example here is not, in itself, responsive: the 2nd/middle font value needs to be something variable, eg a vw/vh value or a %.
use emojis for class names - ok for personal projects, but confusing AF for larger projects, where some may not understand without some extra documentation. Unless you're joking for this one, obviously 🙂
exadiv / visbug - can't say that I've ever heard of these, but they seem to replicate what's already available in the browser dev tools
use SCSS (or Sass 😉). I use SCSS every day, so I'd completely agree. But folks should definitely try to understand plain CSS too, as it will most definitely help.
Couple of other things:
Watch out for spaces between the numeric part and the unit for property values (see the relative units example).
css is to a website what beauty is to a woman - this is a predominantly male community, right? If not, I think there will be a few women who will be a bit pissed off reading that. Just sayin'
I don't think you understand what the
clampfunction does; your examplefont-Size: clamp(14px, 24px, 36px)is the same as just a static24px.developer.mozilla.org/en-US/docs/W...
+1 @afif .
Also, any specific reason for using the * selector for defining variables?? I mean I've always been using the
:rootfor it. (Not bashing or anything, just asking it out of curiosity 😅)Yes, it ensures that all elements share that rule as their default, it works well especially if you want to really control the element and its spacing...
all elements share that rule as their default --> CSS variables are by default inherited so defining them inside
:rootor*will give you the same result. This said I am against both configuration (the :root and *) because it's a very bad practise we see in all the courses/tutorial. CSS variables should be defined based on your use case. If you have to define a color that will get used everywhere then do it inside :root but if you will define a variable that will get used by one or two elements then define it only for them using a specific class. All the elements don't have to inherit all the variablesSorry, I can't aggree with the emoji tip - personally, I prefer clear class names, for example, if I'm creating a specific container for some section, I would rather use a proper class name, so in CSS I know exactly what HTML part it refers to. I'm still a beginner and I already hate my code being messy and my advice would be create as less specific classes as possible ;)
thnx brother, I knew lots of things that I didn't touch since my career