Let's say I have on page 2000 elements. I want to inject into this page elements (banners) from custom module. This module's css file has 300+ css selectors, each selector needs to have unique dynamic prefix to avoid conflicts with other modules inside the same page. I can not use 1 unique id selector because more banners can be loaded, so I need to use something like this:
<div id="company_banner14"></div>
<div id="company_banner15"></div>
div[id^='company_banner']{
}
or
<div id="company_banner14" class="company_banner"></div>
<div id="company_banner15" class="company_banner"></div>
.company_banner{
}
What is better from performance view? Is using regex selector bad practice, would 300 regex selectors make any visible performance impact?
After looking at what you need is have a custom CSS for all elements. There are some points that should be kept in mind for this query.
Using Inline CSS- I think inline CSS is the best solution if you are not using long CSS for one element. It saves very valuable amount of code to your page if your loop too many elements. For example, <div id="company_banner15" class="company_banner" style="Width:x; height:y;"></div>
Using CSS Classes- It is the alternate way for Inline CSS but not as code saver as Inline CSS. if your using same type of style to all elements it is accurate not not if your using different type of style in loop.
Hope these suggestion will guide you. Thanks and cheers.
Related
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 get a CSS selector to check and apply the CSS based on the condition that if: sectionContent-noToolbar is available, then apply height:2em on sectionSeperator. Is it possible to achieve that using some selector? I have been searching for an answer for quite a while now without any luck. Any suggestions?
<section class="sec" name="Information">
<div class="sectionContent-noToolbar"></div>
</section>
<div class="sectionSeparator"></div>
No, it isn't.
If they were siblings, then you could use the adjacent sibling combinator:
.sectionContent-noToolbar + .sectionSeperator {
height: 2em;
}
… but CSS has nothing that lets you modify an element based on its siblings descendants.
CSS can't help you. You can achieve this with javascript since it can traverse in DOM. jQuery is quite neat for this task. Just select the node you want using css selectors and traversal functions like parents, siblings or children` and modify the found elements' style manually.
As stated in another answer, there is no way to do this. To achieve the effect you wish to achieve you will need to rethink your implementation. This is because at its core, CSS is not a processed language and as such can not handle conditional statements.
In rethinking, you might look into CSS preprocessors such as LESS or SASS which seek to implement logical constructs in CSS.
I have always disliked using ids and classes as selectors for obvious reasons: ids are unique and classes have to do with styles and should be able to change without affecting functionality of the site.
I used to create things like
<div rel="foo">...</div>
$("[rel=foo]").click(..);
What is the proper way to do this with HTML5? I was tempted by role, but it appears, this attribute has a specific meaning and purpose.
I am just learning HTML5 and your help is greatly appreciated!
You can add any number of classes to your element. And when you selecting, you can use one class as selector.
<div class="class1 class2 foo">
selector,
$(".foo").click(..);
you don't need to defined foo class inside your CSS
Try not using rel, choose title instead. Then you can use jQuery like this:
$('div[title="foo"]').click(...);
Using title, id or class is proper for HTML5. Also, I think you should revisit using classes and IDs as selectors - it's very handy, efficient and easy.
Don't go against the wildly accepted solution here: use the class attribute.
Try to elaborate a naming convention that maps the structure of your pages and components in these pages.
To what extend should I be attempting to use other CSS selectors instead of element IDs/class names or vice versa.
For instance: body > header nav ul+ul { ... } when I could just do #socialnav { ... } to achieve the same thing.
Example HTML code being (obviously there are headers with child navs elsewhere in the code):
<header>
<nav>
<ul>...</ul>
<ul....</ul>
</nav>
</header>
What is the consensus on this? I mean, I find it manageable doing it using CSS selectors, but is there a disadvantage?
Your first guiding principal should be to keep the markup semantic. Your markup above is a great example of this - you're using header, nav, and ul tags in semantically meaningful ways.
Your second guiding principal should be to maintain separation of concerns (e.g., content and presentation). If adding a class names or id's to your markup does nothing for you semantically and you're able to craft CSS selectors w/out them, then you should avoid adding extra noise to the markup.
Sometimes, however, class names and id's are very useful (not just in CSS but also in JavaScript), so they have their place. Just don't resort to them if they're unneeded and are therefore adding unnecessary clutter to your markup.
It's up to your preferences.
I find it not wise to use body > header nav ul+ul, because a small change in your document structure, and you have to rewrite the CSS selector.
Use .classselectors and #id-selectors for elements which aren't an incredible important part of the main document, and use #one-special-item > ul > li > a:hover span to select the more specific elements.
Generally I try and avoid ID selectors in CSS.
I find it a lot easier to deal with classes than using IDs.
IDs can cause issues later on down the line if the markup is used in a Server-Side application, such as ASP.NET, where the IDs are rendered as something different to how they display in the markup.
However, ID selectors do take priority over class selectors:
http://jsfiddle.net/wcLrF/
You should write your stylesheets as rule sets for your site.
If you are writing a style which is you want to to work with a single specific piece of content, then it is good practice to reference that element's ID.
If you are writing a style which is part of your general site look and feel, then it should be written to reference tagnames and/or classes as much as possible.
There will be times when the actual html code is such that it becomes hard to follow those rules, but if you try to stick to that in general then you'll be okay. You may also need to bend your rules if you need to support older browsers (cough, IE, cough) that don't support all the CSS features that you'd normally want to use.
So yes, I would say that the way you've done it in the question is the recommended approach.
Using IDs and Classes as selectors is much faster than using normal css selectors. Some also argue that you should ONLY use classes because they encourage reusability in your stylesheets.
Here's a really good article about Object Oriented CSS: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element
<div id='myDiv' class'ActionControl SearchBox'></div>
where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?
What issues have other people come up against? How have they been resolved?
As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.
This is definitely a good practice...
What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.
Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.
Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.
I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.
Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.
Another way to use multiple classes is to get a kind of inheritance.
.thing { ..blah.. }
.thing.subthing { ..tweaks.. }
<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>
Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.
Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.