TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Orthogonality and CSS in JS

38 点作者 ben336超过 8 年前

5 条评论

deckiedan超过 8 年前
I think the specific problem of CSS &amp; JS (rather than the more interesting &#x27;separation of concerns&#x27; conversation) is partly due to CSS itself not being fully separatable.<p>It&#x27;s used for style &amp; design, but also for functionality. In some ways, ideally, function related CSS would be stored with the module, but site-level design CSS would be separate.<p>Additionally, CSS by design has greedy selectors. If I put in a:<p><pre><code> a { text-decoration: none; border-bottom: 1px solid pink;} </code></pre> in my site.css, it will muck up any components which use an &lt;a&gt; tag, but don&#x27;t specifically re-write the border.<p>Are there good solutions to this?<p>I kind of feel in some ways, with SPAs and web apps being a thing rather than simple pages, we need a new way of defining styling, which then compiles to CSS, figuring out the correct over-rides along the way.
评论 #13318513 未加载
评论 #13318930 未加载
评论 #13318508 未加载
评论 #13318641 未加载
k__超过 8 年前
&gt; How do we define module boundaries?<p>The question should be &quot;How do we define module interfaces?&quot;<p>Take Bootstrap as practical example.<p>How does it &quot;interface&quot; with your code?<p>CSS classes of course!<p>But wait!<p>If you use its &quot;components&quot; it also interfaces via HTML elements.<p>If you use even more of it, it also interfaces via JavaScript.<p>But even if you just use their CSS, how to switch to BlazeCSS, for example?<p>Well, you kick out Bootstrap, include BlazeCSS and ... you replace the CSS classes in your HTML elements, done...almost, sometimes you even have to fix up the HTML.<p>Hopefully this gets better with Web Components.<p>The problem we have right now is that CSS stuff is top down, while it still requires heavy customization from the bottom up (some styling only work for specific element types, etc.)<p>With Web Components, we can have custom elements &quot;at the bottom&quot; which are transparent in their child element usage, and can let CSS frameworks target them from the top. V1 uses ul&#x2F;li for tabs, V2 uses divs all the way, but the users just includes the css&#x2F;js and the used tag &lt;fw-tabs&gt; stays the same.
jlebrech超过 8 年前
features are concerns too, now you have files related to your feature separated by not only file but folders and drives.<p>maybe there should be a file editor that&#x27;s feature aware but also separates those file for you.
extra88超过 8 年前
I&#x27;m not sure, does the article author recognize that the quoted tweet [0] is satire? The subsequent thread should make it clear.<p>[0] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;BenLesh&#x2F;status&#x2F;812092408519413761" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;BenLesh&#x2F;status&#x2F;812092408519413761</a>
评论 #13319036 未加载
评论 #13320587 未加载
vorotato超过 8 年前
Gather together the things that change for the same reasons. Separate things that change for different reasons. Sometimes that means that splits cleanly by language boundaries, but what should we do if it doesn&#x27;t.