I have received a component library. I have to use its CSS for the relevant components in our webb-app. I go to "checkbox". I right-click on it and choose "copy as CSS". The CSS for all the states of a checkbox is then copied. But it is just the CSS declarations with their properties and values. The CSS selectors are missing. Is there any way to also get the CSS selectors from Sigma?
As far as my experience, I usually type selector manually because most elements have a different class name or id than what's in the design. If you want it to work automatically, I think you can use plugin to convert from Figma to HTML. You can find them here https://www.figma.com/community/search?resource_type=plugins&sort_by=popular&query=figma+to+html&editor_type=all
Related
I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style)
which has a css reset, removes all the default styling from elements of the portable text.
How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.
In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.
Option one -use module.css file.
in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here
option two -use third party library like styled component.
this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc
Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.
.unset * {
all: revert;
}
I've developing an app with Vue, and a third-party template, and dynamic plugins, and all kinds of trickery. I'm have a really hard time with the CSS.
Often I need to style particular element on the page, an <input> for example, and I can't figure out how to write a selector that actually works. The input may have been created dynamically by some Javascript and may have had CSS applied programmatically.
So I go to Firefox Web Developer, click on the element, and see a bunch of CSS classes. I create a rule:
.myCustomClass {
color: red;
}
put myCustomClass in the class="" tag in the <input>, and... nothing.
I'm thinking I need to prefix it like this:
.someOuterClass .someInnerClass .myCustomClass {
color: red;
}
but that rarely works. Sometimes I give up and add !important. Sometimes that works, and sometimes it doesn't.
So my question is, can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?
I've read about specificity, but it's not helping.
Specificity is a PITA sometimes, especially when other 3rd party libraries are adding stuff to the mix.
Here are a few things you can try:
Make sure to add your styles to the END of the CSS. Theoretically, you can affect the order Webpack includes CSS (I've never tried it)
Add an ID not a class to a wrapper outside the elements you want to change. Then reference this ID in the CSS chain eg: #myAppID .className .subClassName {} Basically ID's are stronger than classes in CSS specificity. I would try to do this at a page/view level to make life easier.
If elements are already getting classes (as you see them in the inspector) try to reuse those classes with your "override" CSS. If the classes are modularized (Have a random suffix like someClass__34xft5) you shouldn't use those exact classes since they can change if the source is recompiled. In that case, use a "matching" selector [class^=”someClass__”] to match any selector with that prefix.
Not sure how deep you want to go, but here's an article about overriding Amplify-Vue prebuilt styling.
One caveat, if the CSS is being added inline via javascript somewhere, it's going to be very hard to override. You may want to use !important in conjunction with the above.
"...can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?"
Probably, but why bother? You're already adding class attributes to elements. Why not add inline style attributes instead? Adding a bunch of classes or ids just to create a specificity chain to touch up styles is pretty messy...inline styles are barely if at all worse and are clearer to understand.
Inline attributes are the most specific CSS instructions you can give.
I am trying to make an existing website responsive using Bootstrap. The issue is that some classnames in the existing css files there are classes defined that have the same name as in the Bootstrap css files.
I was curious, if there is a way to define the stylesheet to be used as a source for the class styles?
Imagine that there is container class defined in the original CSS files and the container class defined in the Bootstrap CSS. Is it possible to somehow distinguish between them? Or only renaming will do the trick?
Think on it well before dealing with this.
You can link one or another css on the declaration, but obviously it will work only the linked one on this view. (recommended if you don't need both)
If you link both (not recommended), the load of each can be different that you expect, creating visual glitches or loosing usabillity.
You can deal with load times expecting it to load as it's supposed (the first linked before the second one) that it's a bad idea because it depends on many things to work as it's supposed, or using javascript to make some stylesheet load after (not recommended).
Use !important statement (highly not recommended)
Why it's not recommended?
You will be overriding properties and values, making it unstable and increasing your load time, specially if you use javascript.
You'll loose the control over which property the browser is applying to an object and which not. Specially because Bootstrap will take preference over some properties even if the other css loads after (due to well accurated selectors).
!important, ironically is less important than a well accurated selector, so it only work sometimes dealing with Bootstrap. By the other part, it will make difficult each time you need to override a property value (try not to override if possible, but if needed, it's recommendable to use better selectors or different classnames or IDs to get a clean maintainable code).
What you can do?
you've different options.
The first one (the best one) is split this custom css into different css stylesheets depending on the view are needed, to avoid loading styles when there's no reference to them. The second step is to clean those css files, changing classnames to not interfere with bootstrap, and deleting possible duplicate or override of properties that bootstrap already has. You'll have a clean, fast and pretty css.
The second one is to change classnames on your css and cleaning it of possible override of properties that interfere with bootstrap.
The fastest one, if you hate a little the web owner, is simply changing classnames on your custom css, and the references to them on your HTML plus bootstrap classes:
< div class="customContainer container"> ...
And start praying for the overrides to don't cause glitches on some version of some browser.
EDIT:
You've another option, that is editing bootstrap framework classnames, which is not recommended because you'll need to produce documentation and will be less maintainable (loads of programers/designers know bootstrap but not your modified bootstrap), and you'll have to waste loads of time doing it well.
Just add a custom class like "custom-container" and add style to this class.
Rename the classes is the option for existing css. Same name is not option.
Change your initial class names as the default bootstrap classes are needed to make your site responsive, or better still do an edit of the bootstrap bundle
Step 1:
Load your custom css file after you load your bootstrap.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
If that is still not working just add it as important. But avoid using this trick as it can override styling from base.
Eg:
p {
color: red !important;
}
Step 2:(better one)
You can use IDs for styling.
#custom_id p{
color: red;
}
<body id="custom_id">
I will recommend you to use ID, because id is unique and use for specific styles. its always good to use rather than using !important on class properties later. Another option is rename classes.
First add bootstrap css and then add your css. The style in your class will override the bootstrap class styles(some styles in bootstrap are made important so that classes you should make important in your style).
I have a table where I show/hide a full column by jQuery via a CSS class that doesn't exist:
<table>
<thead>
<tr>
<th></th>
<th class="target"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="target"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="target"></td>
<td></td>
</tr>
</tbody>
</table>
With this DOM I can do this in one line via jQuery: $('.target').css('display','none');
This works perfectly, but is it valid to use CSS classes that aren't defined? Should I create an empty class for it?
<style>.target{}</style>
Are there any side effects or is there a better way to do this?
"CSS class" is a misnomer; class is an attribute (or a property, in terms of scripting) that you assign to HTML elements. In other words, you declare classes in HTML, not CSS, so in your case the "target" class does in fact exist on those specific elements, and your markup is perfectly valid as it is.
This doesn't necessarily mean that you need to have a class declared in the HTML before you can use it in CSS either. See ruakh's comment. Whether or not a selector is valid depends entirely on the selector syntax, and CSS has its own set of rules for handling parsing errors, none of which concern the markup at all. Essentially, this means HTML and CSS are completely independent of each other in the validity aspect.1
Once you understand that, it becomes clear that there is no side effect of not defining a .target rule in your stylesheet.2 When you assign classes to your elements, you can reference those elements by those classes either in a stylesheet, or a script, or both. Neither has a dependency on the other. Instead, they both refer to the markup (or, more precisely, its DOM representation). This principle applies even if you're using JavaScript to apply styles, as you're doing in your jQuery one-liner.
When you write a CSS rule with a class selector, all you're saying is "I want to apply styles to elements that belong to this class." Similarly, when you write a script to retrieve elements by a certain class name, you're saying "I want to do things with elements that belong to this class." Whether or not there are elements that belong to the class in question is a separate issue altogether.
1 This is also why a CSS ID selector matches all elements with the given ID regardless of whether the ID appears exactly once, or multiple times (resulting in a non-conforming HTML document).
2 The only situation I'm aware of where an empty CSS rule like that is necessary is when some browsers refuse to apply certain other rules properly as the result of a bug; creating an empty rule will cause those other rules to be applied for some reason. See this answer for an example of such a bug. However this is on the CSS side and therefore should have nothing to do with the markup.
There are no ill effects to use classes which don't have styles. Indeed, that's part of the usefulness of CSS is that it's de-coupled from the markup and can style or not style elements/classes/etc. as needed.
Don't think of them as "CSS classes." Think of them as "classes" which CSS happens to also use if it needs to.
According to HTML5 specification:
A class attribute must have a value that is a set of space-separated
tokens representing the various classes that the element belongs to.
... There are no additional restrictions on the tokens authors can use in
the class attribute, but authors are encouraged to use values that
describe the nature of the content, rather than values that describe
the desired presentation of the content.
Also, in the version 4:
The class attribute has several roles in HTML:
As a style sheet selector (when an author wishes to assign style
information to a set of elements).
For general purpose processing by
user agents.
Your use case falls under the second scenario, which makes it a legitimate example of using a class attribute.
You can use a class which has no styles, this is entirely valid HTML.
A class referenced in a CSS file is not a definition of a class, it is used as a selector rule for styling purposes.
When you use a classname in JavaScript, it does not look at the CSS to find that class. It looks directly in the HTML code.
All that is required is that the classname is in the HTML. It does not need to be in the CSS.
In fact, many people think it's actually a good idea to keep separate classes use with CSS and Javascript, as it allows your designers and coders to work independently without getting in each other's way by using each other's classes.
(note, the above paragraph is obviously more applicable for larger projects, so don't feel that you have to go to this extreme if you're working on your own; I mentioned it to make the point that the two can be entirely separate)
You can use CSS classes without using it, but I suggest that if you are adding CSS classes just for the JavaScript/jQuery code, prefix with it js-YourClassName so the front-end developers never use these classes to style the elements. They should understand that these classes can be removed at any time.
The moment you add the Class in your HTML the Class will be defined, so your solution is completely fine
It's not necessary to define CSS classes in your stylesheet. It should work just fine. However, adding it won't harm.
One thing that nobody here has fully mentioned is that JavaScript (aided by jQuery in this case) isn't able to directly modify a document's cascading style sheet. jQuery's css() method merely changes the matched set of elements' style property. CSS and JavaScript are completely unrelated in this aspect.
$('.target').css('display','none'); doesn't change your .target { } CSS declaration at all. What has happened here instead is that any element with a class of "target" now looks something like this:
<element class="target" style="display:none;"></element>
Are there any side effects caused by not pre-defining a CSS style rule? None whatsoever.
Is there a better way to do this? Performance-wise, yes there is!
How can the performance be improved?
Rather than directly modifying the style of each element, instead you can pre-define a new class and add that to your matched elements using addClass() (another jQuery method).
Based on this pre-existing JSPerf which compares css() with addClass(), we can see that addClass() is actually much faster:
How can we implement this ourselves?
Firstly we can add in our new CSS declaration:
.hidden {
display: none;
}
Your HTML would remain the same, this pre-defined class is simply in place for later use.
We can now modify the JavaScript to use addClass() instead:
$('.target').addClass('hidden');
When running this code, rather than directly modifying the style property of each of your matched "target" elements, this new class will now have been added:
<element class="target hidden"></element>
With the new "hidden" class, this element will inherit the styling declared in your CSS and your element will be set to no longer display.
As is mentioned by so many others, yes, using classes with no assigned CSS is perfectly valid and rather than thinking of them as 'CSS classes' you should simply recognise the semantics of class and ID to be groups and individual elements respectively.
I wanted to chip in as I felt an important point hasn't been raised given the example. If you ever need to do visual manipulations to a variable length of elements (in this case you're using table rows) then it always makes sense to recognise that the cost of doing so through Javascript could potentially be very expensive (e.g if you have thousands of rows).
In this situation let's say we know that column 2 always has the potential to be hidden (it's a conscious function of your table) then it makes sense to design a CSS style to handle this use case.
table.target-hidden .target { display: none; }
Then rather than using JS to traverse through the DOM finding N elements we simply need to toggle a class on one (our table).
$("table").addClass("target-hidden")
By assigning the table an ID this would be even quicker and you could even just refer to the column by using the :nth-child selector which would reduce your markup further but I can't comment on efficiency. Another reason for doing this is that I hate inline styling, and will go to great lengths to eradicate it!
It will have no effect if you apply a class on a HTML element, and that class is not defined in CSS. It is a common practice and like Aamir afridi said if you are using classes for js only purpose, it is a good practice to prefix them with js- .
It is not only valid for calsses, but also for id attribute of html elements.
There's no problem at all of using classes to just query for elements. I used to give such class names the sys- prefix (for example, I'll name your class sys-target) to distinguish them from classes used for styling. This was a convention used by some microsoft developers in the past. I also noticed a growing practice of using the js- prefix for this purpose.
If you are not comfortable with using classes for purposes other than styling, I recommend using the Role.js jQuery plugin which allows you to achieve the same purpose using the role attribute, so, you may write your markup as <td role="target"> and query for it using $("#target"). The project page has good description and examples. I use this plugin for big projects because I really like keeping classes for styling purposes only.
Refer to the jQuery validation engine. Even in there we also use non-existent classes to add validation rules on the HTML attributes. So there is nothing wrong in using classes that are not actually declared in a stylesheet.
I want to know what things can be done "ONLY" with CSS , that are not available using dynamically updated style "attributes" using Javascript. So far I know:
Media queries
Pseudo tags
Any more?
Update:
This question was closed but I asked it as I am trying to decide on the technology to use for a project, but one of the options cannot use CSS style sheets, and can only manipulate the style attribute using javascript.
Inline style attributes can only contain property declarations (e.g. width: 10px or color: red). They can't contain any other CSS constructs: not selectors, at-rules (e.g. #import, #media, #font-face), etc. Just property declarations.
However, they play a big role in the cascade: any styles for an element with that attribute take highest precedence (after considering !important of course).
There's actually an entire module devoted to style attributes, by the way, but it's not essential reading for authors.
So, anything that isn't a CSS declaration, is only possible in a stylesheet, not a style attribute. Not sure if that's what you're asking...
Note that media queries and #media rules are not the same thing; media queries can exist in areas outside of stylesheets too, like HTML's media attribute, where they're next most commonly found.
I believe pseudo classes (:hover etc..) and pseudo elements (:after, :before) cannot be added/manipulated via JS (via the style property i mean) because they are not part of the DOM.