Comments (2)
This is mostly due to the bad performance of class based selectors.
If you want to use an ID to hook your JavaScript into you can do so. You don't have to share classes used for styling with your JavaScript hooks.
<div id="jshook" class="csshook"></div>
The two can simultaneously exist, and I'd prefer it this way. It's more semantic.
IDs have a higher priority over classes. So if your element has an ID and a class, the styles of the ID will override the styles of the class. If you'd use two classes instead, it would depend on the specified order of the classes which is pretty bad
Yes, which is why you want to avoid the use of IDs. Embracing the cascade and understanding specificity is precisely why css architecture matters. Using IDs will result in more complex and confusing overrides.
simply because you don't have to check if an element may be used multiple times or not.
I'm not sure what the benefit here is. Why arbitrarily limit yourself with CSS hooks? The use of IDs with JavaScript, again, I can see the benefit of and agree with. The assumption that CSS hooks need to follow the same rules seems without merit.
from css-architecture.
Hey @spiritix, thanks for the feedback!
I'd have to say I agree with @jaasum here, in that it's totally possible (and even preferable) to have co-existing selection schemes along with the one you use for styling. The most common ones I'm aware of are:
- Using a separate class namespace (or indeed even ID's) for hooking in JS functionality
- Using data-attributes (e.g.
data-test="user login"
) or ARIA attributes for driving a test suite
The idea with both is to decouple styling (CSS) from functionality (JS), which is a commendable practice, just like @jaasum already pointed out.
However, in JavaScript (especially using selector engines of libraries like jQuery), the performance difference of using
$('#my-element') vs. $ ('.my-element') is massive. And since this article mostly affects large-scale applications, the browser rendering time should not be neglected.
The rendering performance gains from optimizing CSS selectors have repeatedly been classified as mostly snake oil by noted experts in the field, for example:
sweating over the selectors used in modern browsers is futile; most selection methods are now so fast itβs really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. Look here last to speed up your CSS.
-- Enduring CSS author Ben Frain
βUsed in moderation pretty much everything will perform just fine from the style matching perspective.β
-- WebKit code developer Antti Koivisto
The difference in speed between an ID and a class is almost totally irrelevant.
-- The original CSS Wizard Harry Roberts
That is not to say there aren't performance related issues with CSS, just that selector performance is at the very bottom of the list of optimizations you should consider.
from css-architecture.
Related Issues (13)
- Styles encapsulation HOT 4
- Shadow DOM support note HOT 4
- Should add layout architecture as well HOT 3
- How to handle global state? HOT 1
- New translation available (chinese) HOT 3
- Class names concatenation HOT 3
- Global styles HOT 3
- Further reading HOT 2
- Using Vue.js solves a lot of this HOT 1
- Incorporate feedback from around the web
- Explicitly mention `box-sizing: border-box` HOT 1
- MD file for css HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-architecture.