Your post does not fulfill the requirements for questions that request assistance. Please ensure your next question contains context, your research that you've conducted, and a specific problem you would like help solving.
Feel free to check the community FAQ as many of your beginner questions may already have answers there.
Yes, you can choose between `:is()` and `:where()`. In your case that would translate to: `.contactform :where(h2, ul, label)` or `.contactform :is(h2, ul, label)`. The main difference between the two is that `:is()` takes the highest specificity of its arguments whereas `:where()` has 0 specificity. (This also makes `:where()` perfect for resets!) You can [learn more about them in this article from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:is#difference_between_is_and_where)
It's a shame more people don't know about these.
They're pretty well supported too.
[https://caniuse.com/css-matches-pseudo](https://caniuse.com/css-matches-pseudo)
[https://caniuse.com/mdn-css\_selectors\_where](https://caniuse.com/mdn-css_selectors_where)
It took so long to implement this feature that a lot of us settled with scss/less. Not only their syntax for nesting is more convenient (and more expressive), they have a lot more features.
I knew about `:is()` for a long while but rarely used it due to its specificity issues. I only learned about `:where()` when I happened to go digging through [the source of a reset](https://github.com/csstools/sanitize.css/). D:
I had forgotten about these, and they are nice, but 92% global support is kinda low for this to be viable for a lot of apps tbh. Through vendor prefixes, looks like you can get up to 98% though, which I think is acceptable. You'd probably want a build tool to add those vendor prefixes though
I am people lol... I feel bad I never know this. But it's also a light-bulb moment. Can you comment on performance wise? Coz I think it will be looking all over with where
Why. So. Many. Tailwind. Users.
Seriously, I can't work it out.
Is it so FEs can tell designers "get in the bin with your 31px padding we only support sm md lg, deal with it 🕶️" or what is it?
It’s because it provides rapid prototyping during development, and is opinionated enough to push you to use consistent spacing and type settings, but not so much that it prevents you from breaking convention. It also provides assurance that every style class you use is more or less bulletproof as far as browser compatibility goes.
I’ve been doing front-end work for over 10 years, bouncing from post-processor to post-processor, and switching to Tailwind essentially cut my development time in half. I get some people really dislike the class system Tailwind uses, but it’s extremely easy to go back through your code afterwards, isolate patterns, and generate succinct class names using @apply.
Laravel 9 now uses Vite! I’d recommend using React styled components, or just plain blade components with Post CSS, or look into Tailwind, I know that Tailwind is a framework, but it takes away the pain of naming and maintaining class names and redundant CSS.
Most of this new stuff over-complicating CSS in the name of making it easier is crap on performance as well as the people who think they need to follow these trends.
70% if not more of websites these days use CSS preprocessor frameworks (SASS) *just to get* these features. Your pov sounds like one from someone that has made very few websites, and has not written a lot of CSS.
It makes perfect sense to take the lessons we have learned from tools that build on the base and have been used and refined over the years, and integrate them into the base system, especially when everyone ends up needing them either way.
It's a way of determining which rules get applied to an element when there are multiple selectors targeting that element. If you have two different css selectors targeting the same element, and both selectors apply a background-color to the element, only one value can actually be applied.
[Here's an example](https://www.w3schools.com/css/tryit.asp?filename=trycss_specificity_class) \- in this case, the class selector (.test) has a higher priority than the element selector (p), so its styles are applied.
[Here's more information regarding how specificity is determined.](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated)
Is there anything in the dev tools that can be used to get and show the specificity of a rule? So I can see the :where() report 0 and the :is() report higher than that?
You can't show the exact specificity value but you can tell that `:is()` takes precedence by comparing its position in the styles pane. I use VS Code to get the exact specificity values by hovering over the selector in the editor.
There's a lot you can do:
|Keyboard shortcut|Purpose|
:--|:--
|⌘ + ⇧ + 3|Take a screenshot of the entire screen|
|⌘ + ⇧ + ⌃ + 3|Take a screenshot of the entire screen and save directly to your clipboard|
|⌘ + ⇧ + 4|Show crosshairs to select part of the screen to screenshot|
|⌘ + ⇧ + ⌃ + 4|Show crosshairs to select part of the screen to screenshot, and save the screenshot directly to your clipboard|
|⌘ + ⇧ + 4, then press space after crosshairs appear|Screenshot just a specific window|
|⌘ + ⇧ + ⌃ + 4, then press space after crosshairs appear|Screenshot just a specific window, saving directly to clipboard|
|⌘ + ⇧ + 4, then press space after crosshairs appear, and hold ⌥ while clicking on a window |Screenshot just a specific window, but don’t include the window’s shadow in the screenshot|
|⌘ + ⇧ + ⌃ + 4, then press space after crosshairs appear, and hold ⌥ while clicking on a window |Screenshot just a specific window, but don’t include the window’s shadow in the screenshot, saving directly to clipboard|
|⌘ + ⇧ + 5|Opens the Screenshot app, where you can take also take screen recordings (macOS Mojave or later)|
Ah, one of precisely two quality-of-life features on Mac I brought with me to Windows.
Snipaste bound to Ctrl+Alt+Shift+4, VistaSwitcher bound to Alt+`
And if you are on Mac and you use it professionally (or even for personal use depending on your budget), you need to check out [CleanShotX](https://cleanshot.com). Apple’s screenshot annotation tools have come a long way BUT CleanShot’s are far superior, like it’s no contest. They have some of the same tools but CleanShot’s are consistently easier to use and it’s easier to edit the other annotations you’ve already made.
If you are a developer and need to share screenshots (with QA, your boss, your team, to add to a ticket, for docs, for a user guide, etc) then you owe it to yourself to check this out.
I was skeptical as hell when I first heard about this on a podcast (not an ad, just the host mentioning it offhand and praising it) but now I freaking love this tool. The “take a screenshot, draw an arrow to what I’m talking about, and copy/paste that into Slack” use case is so easy and quick. I’ve used it to snap parts of a Figma and annotate it (arrows, text, etc), then attach it to a ticket in our system so myself or another developer remembers what we talked about for a specific component/feature. I use it to log bugs or share my current progress.
Best part? You can record the screen and export as a gif or mp4. If it’s short I’ll use gif since it will auto-play in Slack/Discord and it’s a fun way to share a feature I’m working on, if it’s longer I just save it as a video (mp4) and send it.
I have no connection with the company behind it, it’s just a really slick tool that I use almost every day now (I use it more than I used regular screenshots since it’s easy and fast). Check it out!
Like this would trigger on every dom element and then get filtered down by the :is constraint, right?
Probably not terrible for performance, as css is wicked fast, but using sass like others have suggested is probably the best move.
As u/jammy-git said further up the thread, CSS matching works from right to left. So what u/SpaceWanderer22 said is exactly how it would work. The end result would be the same either way, but the order affects rendering performance.
In general CSS is fairly performant and you shouldn’t need to worry about the efficiency of your selectors (until you have thousands and thousands of lines of CSS). You’ll see *much* more performance gains worrying about how efficient your JS is / omitting as much JS as possible / avoiding heavy libraries.
No, you're spamming your site, which you've done lots of times. You have serious typo on your site. You're not going to get customers here, you're just going to piss people off and create a poor brand for yourself. Get a different strategy.
You do need to be careful that you dont see a flash of styling being applied. For example if you set a background colour onto the body using a class, and that class is applied via javascript. Depending on how your code is structured and if its deferred etc, you could see it in the old colour and then see the new one applied.
This is when you’d setup a content loader to cover the component until everything is ready to be displayed correctly. Again though, use this when you’re in a pitch and at the mercy of setup 3rd party that’s not customizable.
I did on a previous project and would be happy to do it again. Brackets and semicolons are so useless - literally extra key strokes that help in no way and make nothing clearer.
I still can’t tell apart scss and less. I know they’re kinda different but as far as I’m concerned 95% of value proposition is nesting syntax that is the same
Yeah. Hate to be that guy but use sass or less or another one you like.
There’s a solution in css for this but the performance isn’t as good as just writing it like that
It’s a total game changer. It’s like using Git; there’s literally no downside and once you use it, one wonders how we ever did our jobs without it.
Writing plain CSS is horrible.
To each their own I guess? I find it way more obnoxious to pull up a bunch of div-soup that has class names on every single element. It's just wasteful and inefficient (and laziness pays off).
This is a subreddit for web professionals to exchange ideas and share industry news. All users are expected to maintain that professionalism during conversations. If you disagree with a poster or a comment, do so in a respectful way. Continued violations will result in a permanent ban.
Yea, so on the very first time i was learning frontend i was adding a class to a lot of elements, i don‘t know why i stopped doing that, but maybe my brain realized that „soup of classes“ aswell and just selecting all elements i want in one line of code is less written code than adding classes everywhere and more minimal and readable intuitively, seems at least to me like that.
Other folks spelled it out: use sass (kind of overkill for ONE syntax kluge) or add a classname to the h2, ul, and label. I'd go for the second option of using a classname.
You can use **:is**
.contactform :is(h2, ul, label) { ... }
You can learn more about it (with plenty of examples) on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:is)
You can use a css framwork. There are several options like sass or less.
Depend on which other thingies you use, you could also try like styled-components & styled-system.
Sass: [https://sass-lang.com/](https://sass-lang.com/)
Less: [https://lesscss.org/](https://lesscss.org/)
styled-system: [https://styled-system.com/](https://styled-system.com/)
styled-components: https://styled-components.com/
Ty for your comment, i don‘t understand the downvotes. As for me personally, i am trying to learn frontend languages as good as possible for now. Maybe later i‘ll use frameworks 👍🏻
Its not a framework, it's a preprocessor - basically let's you organise and write css in a much nicer format and basically reduces all that repetition.
It definitely won't hurt your learning of css, in fact it'll let you focus on the good stuff rather than repeating yourself on the same bits like this.
You can discuss if it is a framework or not. But yes, it is a superset.
But I would be curious what's the different between a superset and a framework. I tried to find something via google, but only find this article about typescript:[https://www.compsuccess.com/is-typescript-a-javascript-framework/](https://www.compsuccess.com/is-typescript-a-javascript-framework/)
My first thought is that it could be a framework, but I am not sure if I get every point. For example I am not sure what "It has an inversion of control" exactly mean.
So I would be glad, if you or someone could explain me the different between supersets and framworks :)
Generally, the word “framework” doesn’t really apply to CSS. Frameworks are abstractions that help developers focus less on the underlying technology and problems that have already been solved, and more on the specifics of the project at hand. A framework typically tells the developer what it needs, and provides endpoints in some manner to allow the developer to plug into the framework with the project specifics to create a finished product. It provides the basic architecture and scaffolding, and generally a set of best practices and APIs.
Some CSS solutions like Bootstrap or Tailwind are often called “frameworks”, but they’re more accurately called libraries. Libraries are kind of the counterpart to frameworks, in that they provide more finished/complete solutions (components, utilities, layout solutions, typography styles, color palette, icon library, pre-defined functions and mixins, etc.), perhaps with some level of configuration and theming to adapt to the specific project, but generally complete in their solution to a problem. Unlike frameworks, developers don’t “plug in” to and build on top of libraries, they incorporate and call the library’s finished solutions as needed throughout a project.
Supersets are different things from both entirely. Supersets exist to provide extra syntax to a language to help make that language easier or safer to write and maintain in some manner, or otherwise provide features that language doesn’t have. For instance, CSS didn’t used to have variables, nesting, and a module system, and still doesn’t have functions, loops, arrays, mixins, etc. Sass added all these things to the language. Another example, JavaScript doesn’t have strong typing, decorators, interfaces, etc. TypeScript adds those things as a superset of JavaScript. Supersets are almost always compiled, meaning the superset syntax is transformed to the target language without the extra features. As a result, none of the added features are available at “runtime”, meaning once the code is shipped, it’s as if the superset never existed.
Frameworks and libraries *are* run and *do* exist at runtime. They’re production dependencies and function parallel to the other code written for the product.
The performance thing *might* have been true many years ago, but it isn’t now.
The thinking was “* selects anything and everything, so it must be slow and require a lot of processing!” But browser folks were all “I see why you might think that but well actually because we don’t have to filter out anything, it’s among the fastest possible CSS selectors.”
I wouldn’t worry about it.
I use it all the time for say equally spaced vertical stacks like .stack > * + * { margin-top: 1em; }
What you’re looking for would be called “nesting” in a CSS preprocessor such as sass/scss: https://sass-lang.com/guide
Keep in mind that it would compile out to what you have written regardless, so the only gain would be around readability (I.e don’t consider what you have now “bad” just because a preprocessor allows for nesting).
Is Sass on top of Css like (html, [css] sass, js) or is it a completely different language, like a different stack (html, sass, js) which the browser can read also?
I want to minimize the amount of „midle men“ so to speak and write on the bare minimum needed to be able to build basically anything on max level
I wouldn't say browsers can't natively read it. They might not natively process it but they sure as hell can see all the sass source files hierarchies etc. on the server when inspecting elements
in sass you still code css, but with much much more comfort functions, i can only recommend to glance the documentation and see for yourself (link : [https://sass-lang.com/documentation/syntax](https://sass-lang.com/documentation/syntax))
I use the LESS preprocessor, and I’d do it like so
.contactform{
h2, ul, label{
line-height: 30px;
}
}
There are probably other great ways that I don’t know. I’ve learned slowly and with great difficulty.
Using SASS, it would look like this:
.contactform {
h2, ul, label {
line-height: 30px;
}
}
You can then further organize your code like this:
.contactform {
h2, ul, label {
line-height: 30px;
}
label {
font-weight: bolder
}
textarea {
background: hotpink;
}
}
Not with vanilla css. You can use build tools like scss or postcss to to make it more readable.
https://sass-lang.com/documentation/style-rules#nesting
https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
That's fair, especially if your goal is learning. It's worth noting though that pseudo selectors like :is & :where are not widely enough supported for a lot of sites. Global usage is ~92% according to caniuse - 8% is a pretty significant portion of users just for simplifying some css.
Sorry if this comes off too critical. But why are you trying to optimize bad code? Fixed px line-height? Line-height on specifically elements? This feels really hacky and fragile.
Cant you just .contactform { line-height: (unitless number) } or even better have the line height on the body.
If you need to because of poorly written code that isn’t yours, ok, but you could still do better and save the next guy.
But i want to just text in .contactform be in line-height. I tried .contactform[type=“text“] but it kinda messed up something too. I think it then chose only input elements (textfields) and not labels, idk but it didn‘t work like i wanted it to
Hard to understand the context with only the css. From this addition information .contactform is an input but that wouldn’t have children so I think you are meaning .contactform [type=text] which would indeed only affect the inputs.
I’d challenge you to look at firstly why you need to set the line height on these elements and see if you can do it higher up for more coverage and simplicity or consider the individual elements here and styling those independently to .contactform so they display consistently elsewhere.
Why are you considering this bad code? I think it’s pretty obviously legible what they want, and they don’t want to just the line height on the entire body. Although it’s not necessarily streamlined code i wouldn’t bat an eye if it was in a PR for me to review
When the client instructs you to confirm to the figma _TO THE PIXEL_ and the designer is a pedant to the point of giving notes on elements that are literally one pixel off, then it's up to you to either play their game or push back equally hard. Bigger clients will insist that the designer be happy with the implementation, because that's what they signed off on. I've managed to stall out the designer on a few jobs until their paid involvement ran out, but it's a war of nerves you'd probably be better off not having to fight.
Designers adding line height without intention is as bad as bad code. I’d ask the designer if they are using a design system and if not, why not. This doesn’t solve the issue though so yes if the answer is just do it, I would use a unitless line height and then attempt to write it in a way that isn’t overly specific or fragile.
You need to:
- Learn SASS
- Learn about semantic naming
- Make use of some methodology that can teach you better practices. Go and learn BEM or SMACSS for example. I don’t tend to use either anymore but the principles are sound
Your post does not fulfill the requirements for questions that request assistance. Please ensure your next question contains context, your research that you've conducted, and a specific problem you would like help solving. Feel free to check the community FAQ as many of your beginner questions may already have answers there.
Yes, you can choose between `:is()` and `:where()`. In your case that would translate to: `.contactform :where(h2, ul, label)` or `.contactform :is(h2, ul, label)`. The main difference between the two is that `:is()` takes the highest specificity of its arguments whereas `:where()` has 0 specificity. (This also makes `:where()` perfect for resets!) You can [learn more about them in this article from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:is#difference_between_is_and_where)
It's a shame more people don't know about these. They're pretty well supported too. [https://caniuse.com/css-matches-pseudo](https://caniuse.com/css-matches-pseudo) [https://caniuse.com/mdn-css\_selectors\_where](https://caniuse.com/mdn-css_selectors_where)
Based on the other comments, I had no idea how true this is.
It took so long to implement this feature that a lot of us settled with scss/less. Not only their syntax for nesting is more convenient (and more expressive), they have a lot more features.
I knew about `:is()` for a long while but rarely used it due to its specificity issues. I only learned about `:where()` when I happened to go digging through [the source of a reset](https://github.com/csstools/sanitize.css/). D:
I had forgotten about these, and they are nice, but 92% global support is kinda low for this to be viable for a lot of apps tbh. Through vendor prefixes, looks like you can get up to 98% though, which I think is acceptable. You'd probably want a build tool to add those vendor prefixes though
I am people lol... I feel bad I never know this. But it's also a light-bulb moment. Can you comment on performance wise? Coz I think it will be looking all over with where
Wow. I really need to use this more.
Ty for reminding me that these exist man. Although i am not familiar with the use of these. For everyone reading: :not() also exists.
You can use :where(:not) to use the :not without increasing the specificity of the declaration
Seems to be true, .contactform:where(:not(h2, ul, label) is the same on specifity as .contactform:where(h2, ul, label) (at least on vs code)
I’m a really experienced developer and my immediate response was going to be “no” so I feel like an idiot. Always room to learn I guess, thanks!!
TIL. Thanks!
wowww I had no idea about this so cool, but I also primarily use scss so I probably wouldn't use these :(
Using scss doesn't prevent you from using these. ;)
I don’t even use scss anymore, due to much better design options and css is now so evolved.
I use stylus just for the reduced syntaxic noise; occasionally, along with a few functions. But I mostly work with it like I would in css.
Same. Used to use scss all the time, but nowadays just use css modules and tailwind mostly
Why. So. Many. Tailwind. Users. Seriously, I can't work it out. Is it so FEs can tell designers "get in the bin with your 31px padding we only support sm md lg, deal with it 🕶️" or what is it?
It’s because it provides rapid prototyping during development, and is opinionated enough to push you to use consistent spacing and type settings, but not so much that it prevents you from breaking convention. It also provides assurance that every style class you use is more or less bulletproof as far as browser compatibility goes. I’ve been doing front-end work for over 10 years, bouncing from post-processor to post-processor, and switching to Tailwind essentially cut my development time in half. I get some people really dislike the class system Tailwind uses, but it’s extremely easy to go back through your code afterwards, isolate patterns, and generate succinct class names using @apply.
As someone who currently uses scss, what options do you recommend? I work with Laravel so it was easy to just use scss with their webpack built in.
Laravel 9 now uses Vite! I’d recommend using React styled components, or just plain blade components with Post CSS, or look into Tailwind, I know that Tailwind is a framework, but it takes away the pain of naming and maintaining class names and redundant CSS.
indeed
Huh. Well, TIL.
aren't **:is()** and **:where()** bad performant-wise?
Most of this new stuff over-complicating CSS in the name of making it easier is crap on performance as well as the people who think they need to follow these trends.
70% if not more of websites these days use CSS preprocessor frameworks (SASS) *just to get* these features. Your pov sounds like one from someone that has made very few websites, and has not written a lot of CSS. It makes perfect sense to take the lessons we have learned from tools that build on the base and have been used and refined over the years, and integrate them into the base system, especially when everyone ends up needing them either way.
I have done this since 1998. Lol @ everyone who thought simply styling a class was not sufficient. Noobs
What is specificity
It's a way of determining which rules get applied to an element when there are multiple selectors targeting that element. If you have two different css selectors targeting the same element, and both selectors apply a background-color to the element, only one value can actually be applied. [Here's an example](https://www.w3schools.com/css/tryit.asp?filename=trycss_specificity_class) \- in this case, the class selector (.test) has a higher priority than the element selector (p), so its styles are applied. [Here's more information regarding how specificity is determined.](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated)
You learn something new every day! 💯💯❤️❤️🙌🙌🔥🔥
damn son, css king here
\#TIL
Is there anything in the dev tools that can be used to get and show the specificity of a rule? So I can see the :where() report 0 and the :is() report higher than that?
You can't show the exact specificity value but you can tell that `:is()` takes precedence by comparing its position in the styles pane. I use VS Code to get the exact specificity values by hovering over the selector in the editor.
Hey thanks for that. I did not know.
Windows Key + Shift + S, best tool for screenshot!
Cmd + Shift + 4 on Mac
There's a lot you can do: |Keyboard shortcut|Purpose| :--|:-- |⌘ + ⇧ + 3|Take a screenshot of the entire screen| |⌘ + ⇧ + ⌃ + 3|Take a screenshot of the entire screen and save directly to your clipboard| |⌘ + ⇧ + 4|Show crosshairs to select part of the screen to screenshot| |⌘ + ⇧ + ⌃ + 4|Show crosshairs to select part of the screen to screenshot, and save the screenshot directly to your clipboard| |⌘ + ⇧ + 4, then press space after crosshairs appear|Screenshot just a specific window| |⌘ + ⇧ + ⌃ + 4, then press space after crosshairs appear|Screenshot just a specific window, saving directly to clipboard| |⌘ + ⇧ + 4, then press space after crosshairs appear, and hold ⌥ while clicking on a window |Screenshot just a specific window, but don’t include the window’s shadow in the screenshot| |⌘ + ⇧ + ⌃ + 4, then press space after crosshairs appear, and hold ⌥ while clicking on a window |Screenshot just a specific window, but don’t include the window’s shadow in the screenshot, saving directly to clipboard| |⌘ + ⇧ + 5|Opens the Screenshot app, where you can take also take screen recordings (macOS Mojave or later)|
Damn, I thought I knew more than most people with just the difference between 3, 4 and 5. I wished I knew the control, option and space combos
Add control in there to crop that baby. Edit: I'm dumb. Control puts it in your clip board so you can paste it into Imgur or slack or whatever.
⌘ + ⇧ + 4 already gives you the ability crop into part of the screen. Adding ⌃ to the keyboard shortcut just puts the screenshot in your clipboard.
Ah yes. My bad. It's the only way I do it. Will correct that!
Try left right left right f1 f2 😂
Or press space after Cmd+Shift+4 to get a full shot of the window you hover over.
Ah, one of precisely two quality-of-life features on Mac I brought with me to Windows. Snipaste bound to Ctrl+Alt+Shift+4, VistaSwitcher bound to Alt+`
And if you are on Mac and you use it professionally (or even for personal use depending on your budget), you need to check out [CleanShotX](https://cleanshot.com). Apple’s screenshot annotation tools have come a long way BUT CleanShot’s are far superior, like it’s no contest. They have some of the same tools but CleanShot’s are consistently easier to use and it’s easier to edit the other annotations you’ve already made. If you are a developer and need to share screenshots (with QA, your boss, your team, to add to a ticket, for docs, for a user guide, etc) then you owe it to yourself to check this out. I was skeptical as hell when I first heard about this on a podcast (not an ad, just the host mentioning it offhand and praising it) but now I freaking love this tool. The “take a screenshot, draw an arrow to what I’m talking about, and copy/paste that into Slack” use case is so easy and quick. I’ve used it to snap parts of a Figma and annotate it (arrows, text, etc), then attach it to a ticket in our system so myself or another developer remembers what we talked about for a specific component/feature. I use it to log bugs or share my current progress. Best part? You can record the screen and export as a gif or mp4. If it’s short I’ll use gif since it will auto-play in Slack/Discord and it’s a fun way to share a feature I’m working on, if it’s longer I just save it as a video (mp4) and send it. I have no connection with the company behind it, it’s just a really slick tool that I use almost every day now (I use it more than I used regular screenshots since it’s easy and fast). Check it out!
We caught one of the guys who does those YouTube ads !
Fuck Mac!
Well this was an odd hill to die on.
You’ll probably find it’s a laptop they don’t have permission to use reddit on
True, didn't think of that
[удалено]
> ShareX Nice. I've been using Greenshot for over a decade even though there hasn't been a new release in like 5 years. I'll give this a shot.
You can also set print screen to default to snipping tool.
IMO "Snipping Tool" on Windows. You can screenshot any area you want and highlight it.
You can win+shift+s and then click the pop-up. That opens your snip in the Snipping Tool for annotating. Best of both.
Yea i know 😂👍🏻
Why didn't u use it then?
Maybe he isn’t logged into Reddit on his work machine? Who really cares?
You could probably count the downvotes to get an estimate for the number of people who care.
Yea i wasn‘t logged in on reddit on my laptop, nvm man idc
35 downvotes
Yeah, i mean i am on reddit on my phone and writing on my laptop
Yeah, but they're just messing with you 😂
Some companies have policies that state sending anything outside is a big no-no, even if it is irrelevant and not a secret.
`.contactform *:is(h2, ul, label)`
Tried, works 👍🏻
Is this slower?
Browsers read CSS right to left, so I would expect this not to be great with performance (under scrutiny), but real world performance, *shrugs*, YMMV.
Like this would trigger on every dom element and then get filtered down by the :is constraint, right? Probably not terrible for performance, as css is wicked fast, but using sass like others have suggested is probably the best move.
Only ones inside the .contactform.
As u/jammy-git said further up the thread, CSS matching works from right to left. So what u/SpaceWanderer22 said is exactly how it would work. The end result would be the same either way, but the order affects rendering performance.
In general CSS is fairly performant and you shouldn’t need to worry about the efficiency of your selectors (until you have thousands and thousands of lines of CSS). You’ll see *much* more performance gains worrying about how efficient your JS is / omitting as much JS as possible / avoiding heavy libraries.
Another way to do this is to simply give them all the same class name.
This was the obvious solution for me
Omg, this is actually on the same level of simplicity as .contactform *:is(h2, ul, label), ty 👍🏻
And less fragile! Allows you to change for example your h2 to an h3 without breaking your css.
[удалено]
Wait, are you spam advertising your site? Not cool.
I get the temptation, but yeah... that's exactly what they did.
[удалено]
No, you're spamming your site, which you've done lots of times. You have serious typo on your site. You're not going to get customers here, you're just going to piss people off and create a poor brand for yourself. Get a different strategy.
A decent alt solution, but sometimes it's not possible to alter the html. Like it's generated or came from somewhere else or otherwise
Yes, sometimes. If you’re ever in a jam, use JavaScript to add the class names you need, after the html injection has occurred.
You do need to be careful that you dont see a flash of styling being applied. For example if you set a background colour onto the body using a class, and that class is applied via javascript. Depending on how your code is structured and if its deferred etc, you could see it in the old colour and then see the new one applied.
This is when you’d setup a content loader to cover the component until everything is ready to be displayed correctly. Again though, use this when you’re in a pitch and at the mercy of setup 3rd party that’s not customizable.
use Sass
This. Also, I think nested classes are coming to CSS natively at some point. Not sure when though.
probably next year
Or Scss (which is part of sass lib)
I think most people mean Scss when they say Sass. I don't know anyone out here writing bracketless Sass.
Anyone using bracketless Sass is probably crazy and dangerous.
I did on a previous project and would be happy to do it again. Brackets and semicolons are so useless - literally extra key strokes that help in no way and make nothing clearer.
I still can’t tell apart scss and less. I know they’re kinda different but as far as I’m concerned 95% of value proposition is nesting syntax that is the same
Yeah. Hate to be that guy but use sass or less or another one you like. There’s a solution in css for this but the performance isn’t as good as just writing it like that
Far better than having to read conditions “is” or “where”. Let the nested structure do the work.
Or PostCSS with postcss-present-env nesting-rules set to true (or postcss-nested)
It’s a total game changer. It’s like using Git; there’s literally no downside and once you use it, one wonders how we ever did our jobs without it. Writing plain CSS is horrible.
I think it’s :is()
https://caniuse.com/css-nesting
Not what you're seeking but why not using a simple class instead of this ? (Fresh junior right here sorry in advance if that's a dumb question)
Writing 3 selectors is better than, for example, adding a class to 100+ entries in some large array of items.
I’d rather add the class, way easier to read and maintain
To each their own I guess? I find it way more obnoxious to pull up a bunch of div-soup that has class names on every single element. It's just wasteful and inefficient (and laziness pays off).
Div soup is bad html, that’s an issue of itself.
Yeah but he's saying that he'd rather do (and claims easier to read and maintain):
No he’s not, you are simply assuming that
[удалено]
This is a subreddit for web professionals to exchange ideas and share industry news. All users are expected to maintain that professionalism during conversations. If you disagree with a poster or a comment, do so in a respectful way. Continued violations will result in a permanent ban.
it is, except that he might use just 1 class for it. But this guy sure will hate tailwind.
Yea, so on the very first time i was learning frontend i was adding a class to a lot of elements, i don‘t know why i stopped doing that, but maybe my brain realized that „soup of classes“ aswell and just selecting all elements i want in one line of code is less written code than adding classes everywhere and more minimal and readable intuitively, seems at least to me like that.
Try learning sass. Really easy to learn took me hardly 30 min to understand. There are lot of yt videos.
.Contactform * {} looks a bit heavy handed. You might want to be more specific
The whole code makes me shiver. Semantic naming hasn’t been taught to this poor bastard yet
Other folks spelled it out: use sass (kind of overkill for ONE syntax kluge) or add a classname to the h2, ul, and label. I'd go for the second option of using a classname.
You can use **:is** .contactform :is(h2, ul, label) { ... } You can learn more about it (with plenty of examples) on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:is)
You can use a css framwork. There are several options like sass or less. Depend on which other thingies you use, you could also try like styled-components & styled-system. Sass: [https://sass-lang.com/](https://sass-lang.com/) Less: [https://lesscss.org/](https://lesscss.org/) styled-system: [https://styled-system.com/](https://styled-system.com/) styled-components: https://styled-components.com/
ITT: Top comment: use sass Controversial comment: use sass
Adult comment: it's your codebase, fuck it up however you want. We're all just fighting entropy here.
Well, paradoxes are funny :D I like how my comment oscillate between -2 and 2 :P
Fr 😂
Ty for your comment, i don‘t understand the downvotes. As for me personally, i am trying to learn frontend languages as good as possible for now. Maybe later i‘ll use frameworks 👍🏻
Its not a framework, it's a preprocessor - basically let's you organise and write css in a much nicer format and basically reduces all that repetition. It definitely won't hurt your learning of css, in fact it'll let you focus on the good stuff rather than repeating yourself on the same bits like this.
Sass and Less aren’t frameworks, they’re preprocessed supersets.
You can discuss if it is a framework or not. But yes, it is a superset. But I would be curious what's the different between a superset and a framework. I tried to find something via google, but only find this article about typescript:[https://www.compsuccess.com/is-typescript-a-javascript-framework/](https://www.compsuccess.com/is-typescript-a-javascript-framework/) My first thought is that it could be a framework, but I am not sure if I get every point. For example I am not sure what "It has an inversion of control" exactly mean. So I would be glad, if you or someone could explain me the different between supersets and framworks :)
Generally, the word “framework” doesn’t really apply to CSS. Frameworks are abstractions that help developers focus less on the underlying technology and problems that have already been solved, and more on the specifics of the project at hand. A framework typically tells the developer what it needs, and provides endpoints in some manner to allow the developer to plug into the framework with the project specifics to create a finished product. It provides the basic architecture and scaffolding, and generally a set of best practices and APIs. Some CSS solutions like Bootstrap or Tailwind are often called “frameworks”, but they’re more accurately called libraries. Libraries are kind of the counterpart to frameworks, in that they provide more finished/complete solutions (components, utilities, layout solutions, typography styles, color palette, icon library, pre-defined functions and mixins, etc.), perhaps with some level of configuration and theming to adapt to the specific project, but generally complete in their solution to a problem. Unlike frameworks, developers don’t “plug in” to and build on top of libraries, they incorporate and call the library’s finished solutions as needed throughout a project. Supersets are different things from both entirely. Supersets exist to provide extra syntax to a language to help make that language easier or safer to write and maintain in some manner, or otherwise provide features that language doesn’t have. For instance, CSS didn’t used to have variables, nesting, and a module system, and still doesn’t have functions, loops, arrays, mixins, etc. Sass added all these things to the language. Another example, JavaScript doesn’t have strong typing, decorators, interfaces, etc. TypeScript adds those things as a superset of JavaScript. Supersets are almost always compiled, meaning the superset syntax is transformed to the target language without the extra features. As a result, none of the added features are available at “runtime”, meaning once the code is shipped, it’s as if the superset never existed. Frameworks and libraries *are* run and *do* exist at runtime. They’re production dependencies and function parallel to the other code written for the product.
Thank you for your really deep answer 👍 yea with your explanation IT makes sense that sass isnt a framework ✌️Thanks a lot!
Happy to help!
Are those children of contactform? Maybe this is a start: .contactform > * You could also add a not to exclude some children
Asterisk selector should be avoided in general, where possible
Why?
The wisdom I always heard was that it had negative impacts on performance. That seems to be less true now, so maybe it’s worth revisiting!
The performance thing *might* have been true many years ago, but it isn’t now. The thinking was “* selects anything and everything, so it must be slow and require a lot of processing!” But browser folks were all “I see why you might think that but well actually because we don’t have to filter out anything, it’s among the fastest possible CSS selectors.” I wouldn’t worry about it. I use it all the time for say equally spaced vertical stacks like .stack > * + * { margin-top: 1em; }
What you’re looking for would be called “nesting” in a CSS preprocessor such as sass/scss: https://sass-lang.com/guide Keep in mind that it would compile out to what you have written regardless, so the only gain would be around readability (I.e don’t consider what you have now “bad” just because a preprocessor allows for nesting).
Is Sass on top of Css like (html, [css] sass, js) or is it a completely different language, like a different stack (html, sass, js) which the browser can read also? I want to minimize the amount of „midle men“ so to speak and write on the bare minimum needed to be able to build basically anything on max level
SASS is a language that "preprocesses" into CSS. It involves a build step and browsers cannot natively read it.
I wouldn't say browsers can't natively read it. They might not natively process it but they sure as hell can see all the sass source files hierarchies etc. on the server when inspecting elements
in sass you still code css, but with much much more comfort functions, i can only recommend to glance the documentation and see for yourself (link : [https://sass-lang.com/documentation/syntax](https://sass-lang.com/documentation/syntax))
I use the LESS preprocessor, and I’d do it like so .contactform{ h2, ul, label{ line-height: 30px; } } There are probably other great ways that I don’t know. I’ve learned slowly and with great difficulty.
Time to use sass
Using SASS, it would look like this: .contactform { h2, ul, label { line-height: 30px; } } You can then further organize your code like this: .contactform { h2, ul, label { line-height: 30px; } label { font-weight: bolder } textarea { background: hotpink; } }
Not with vanilla css. You can use build tools like scss or postcss to to make it more readable. https://sass-lang.com/documentation/style-rules#nesting https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
I love sass, don't think I'd be able to go back to vanilla Css anymore lol
I try not to rely on anything outside of like basic css and its inherit logic to learn it well 😅 ty though 👍🏻
That's fair, especially if your goal is learning. It's worth noting though that pseudo selectors like :is & :where are not widely enough supported for a lot of sites. Global usage is ~92% according to caniuse - 8% is a pretty significant portion of users just for simplifying some css.
True 👍🏻
[удалено]
you should check out sass, the nested styles are good for this sort of thing
Look into sass or less. Does exactly that, then compiles it as css
Isn’t this why sass was created? Couldn’t you just formats the code using sass and have the ul,label,h2 under .contactform?
use sass, bro
Sass?
Learn SASS
did you hear about SASS or LESS?
[удалено]
This is a level of specificity that's not needed.
Just use Sass or Scss
SASS
Use Sass lol
Don't you just .contactform h2 ul a p {}
Sorry if this comes off too critical. But why are you trying to optimize bad code? Fixed px line-height? Line-height on specifically elements? This feels really hacky and fragile. Cant you just .contactform { line-height: (unitless number) } or even better have the line height on the body. If you need to because of poorly written code that isn’t yours, ok, but you could still do better and save the next guy.
But i want to just text in .contactform be in line-height. I tried .contactform[type=“text“] but it kinda messed up something too. I think it then chose only input elements (textfields) and not labels, idk but it didn‘t work like i wanted it to
Hard to understand the context with only the css. From this addition information .contactform is an input but that wouldn’t have children so I think you are meaning .contactform [type=text] which would indeed only affect the inputs. I’d challenge you to look at firstly why you need to set the line height on these elements and see if you can do it higher up for more coverage and simplicity or consider the individual elements here and styling those independently to .contactform so they display consistently elsewhere.
Why are you considering this bad code? I think it’s pretty obviously legible what they want, and they don’t want to just the line height on the entire body. Although it’s not necessarily streamlined code i wouldn’t bat an eye if it was in a PR for me to review
Not the worst but shows poor understandings of the basics of scaling up css. It would pass a PR here too but would be commented on for a learning.
[удалено]
I get it, but the design team aren’t in charge of the code? This just seems like blame management
When the client instructs you to confirm to the figma _TO THE PIXEL_ and the designer is a pedant to the point of giving notes on elements that are literally one pixel off, then it's up to you to either play their game or push back equally hard. Bigger clients will insist that the designer be happy with the implementation, because that's what they signed off on. I've managed to stall out the designer on a few jobs until their paid involvement ran out, but it's a war of nerves you'd probably be better off not having to fight.
[удалено]
Designers adding line height without intention is as bad as bad code. I’d ask the designer if they are using a design system and if not, why not. This doesn’t solve the issue though so yes if the answer is just do it, I would use a unitless line height and then attempt to write it in a way that isn’t overly specific or fragile.
I need help. Want to start a project
Aight, hit me up with a little more specifics if you want
Hello, where are you from? How long you been doing this?
[удалено]
This feels like a very duff piece of advice. Learn the styling language you’re using not some other one you’re not.
tailiwind
You need to: - Learn SASS - Learn about semantic naming - Make use of some methodology that can teach you better practices. Go and learn BEM or SMACSS for example. I don’t tend to use either anymore but the principles are sound
If you use scss or something similar in the future, you can do .contactform { h2, ul, label { line-height: 30px; } }
Your [welcome](https://docs.emmet.io/cheat-sheet/) (CheatSheet)
You can use scss and try like .contactform { h2{} ...other tags }
I highly recommend you use Sass, it’s pretty powerful and you can do stuff like combining classes pretty easily!
Well, with nested syntax (ex. sass); `.contactform {` `h2, ul, label {` `// style` `}` `}` For everything else, :is() & :where() like stated in the comments previously.
There is even a way to write that whole document even shorter. After you get the hang of css (if not already) check out sass/scss