发表新帖
发表新帖

Page-specific css rules - where to put them?

后端 未结
关注
11 1917
粉色の甜心
粉色の甜心 2021-02-05 05:52

Often when I\'m designing a site, I have a need for a specific style to apply to a specific element on a page and I\'m absolutely certain it will only ever apply to that element

相关标签:
11条回答
  • 遥遥无期
    2021-02-05 06:45

    There are four basic cases:

    1. style= attribute. This is the least maintainable but easiest to code. I personally consider use of style= to be a bug.
      • <style> element at the top of the page. This is slightly better than style= because it keeps the markup clean, however it wastes bandwidth and makes it harder to make sweeping CSS changes, because you can't look at the stylesheet(s) and know what rules exist.
      • page-specifc css: This lets you have the clean HTML and clean main CSS file. However, it means your client must download lots of little CSS files, which increases bandwidth and page loading latency. It is, however, very easy to maintain.
      • one big site-wide CSS: The main advantage of one big file is that it's only one thing to download. This is much more efficient in terms of bandwidth and latency.

    If you have any server-side programming going on, you might be able to just dynamically combine multiple sheets from #3 to get the effect of #4.

    I would recommend one big file, whether you actually maintain it as one file or generate the file through a build process or dynamically on the server. You can specify your selectors using page-specific IDs (always include one, just in case).

    As for the answer that was accepted when I wrote this, I disagree with finding a "combination of classes that gives you the result you want". This sounds to me like the classes are identifying a visual style instead of a logical concept. Your classes should be something like "titlebox" and not "red". Then if you need to change the text colour on the user info page, you can say 

    #userInfoPage .titlebox h1 { color : red; }

    Don't start applying classes all over the place because a class currently has a certain appearance that you want. You should put high-level concepts into your page, represented by HTML with classes, and then style those concepts, not the other way around.

    0 讨论(0)
  • 花落未央
    2021-02-05 06:46

    Look to see if there's a combination of classes which would give you the result that you want. You might also want to consider breaking up the CSS for that one element into a few classes that could be re-used on other elements. This would help minimize the CSS required for your site as a whole.

    I would try to avoid page-specific CSS at the top the HTML files since that leaves your CSS fragmented in the event that you want to change the appearance of the site.

    For CSS which is really, truely, never to be used on anything else, I would still resort to putting a #id rule in the site-wide CSS.

    Since the CSS is linked in from a different file it allows the browsers to cache that file, which reduces your server bandwidth (very) slightly for future loads.

    0 讨论(0)
  • 旧巷少年郎
    2021-02-05 06:47

    I would set an id for a page like

    <body id="specific-page"> or <html id="specific-page">

    and make use of css override mechanism in the sitewide css file.

    0 讨论(0)
  • 花落未央
    2021-02-05 06:48

    For that situation, I think putting the page-specific style information in the header is probably the best solution. Polluting your site-wide style sheet seems wrong, and I agree with your take on inline styles.

    0 讨论(0)
  • 太阳男子
    2021-02-05 06:52

    I would put them in a <style /> tag at the top of the page.

    0 讨论(0)
 看不清?
提交回复
热议问题