CODEWITHSUNDEEP
cssstylesheet
Jon Onstott
Jon Onstott

Reputation: 13727

Should all CSS styles be in stylesheets?

I typically use CSS classes defined in stylesheets for styles that I re-use often, and inline styles for CSS that I don't re-use. Should all styles be in stylesheets? Stylesheets are cached by browsers which is helpful but it seems like that would make the pages a bit harder to work with.

If all styles are included in CSS files, should they reference the element name (like "#myElement { styles...}") or use classes?

Thanks!

Upvotes: 1

Views: 1272

Answers (6)

Brad Christie
Brad Christie

Reputation: 101614

I would argue it depends on your implementations, however most things done with CSS can be refactored in to styles that would (and probably should) ultimately land in an external file.

For example, setting a unique element to style="width:50px;height:25px;" is probably best done on that element, as long as it's only for that element (e.g. a user control, partial view--something compartmentalized). However, style="text-align:center; may be best fit making a .centered { text-align: center; } class you can then reuse (and keep cached in an external file).

Upvotes: 2

Marco Johannesen
Marco Johannesen

Reputation: 13134

All CSS should be in a stylesheet, simply because you shouldn't have to access the source code, to edit the layout/style.

Structre is in the HTML, layout is in the CSS.

  • Use classes for elements that can appear in more than one instance on the website.
  • Use ID's for an element which there can ONLY be one of in each page.

I personally structure CSS files like this:

  • First section: Global elements (h1, h2, a, p, body etc.)
  • Second section: Layout classes/ID's (#footer, #header, #logo, .navigation etc. )
  • Third section: Page specific CSS structured together

This way it's easy to find what you are looking for, the more relevant, the higher in the hirachy.

Upvotes: 1

Drakkainen
Drakkainen

Reputation: 1142

Personally I prefer to have everything in external StyleSheets as that makes it far more scalable. If later in a project you want to reuse a class, you just type it in not go searching for it.

The only time # should be used is for special elements.

Upvotes: 0

0b10011
0b10011

Reputation: 18795

Use structure along with classes to style similar sections and IDs to style non-repeating elements (but these should be far and few between). Example:

HTML

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="wrapper">
<article>Main Article</article>
<aside>
<div class="some-widget-type"><h1>Title</h1></div>
<div class="some-widget-type"><h1>Title</h1></div>
<div class="some-other-widget-type"><h1>Title</h1></div>
</div>
</body>
</html>

CSS

h1 {/* Base styles here */}
.some-widget-type {/* Styles here */}
.some-widget-type h1 {/* Styles here */}
.some-other-widget-type {/* Different styles here */}
.some-other-widget-type h1 {/* Different styles here */}

It allows you to keep consistent styling among similar elements, and the entire page.

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

Generally, yes all CSS should be contained in a style sheet. There are a few instances where it is ok for CSS to show up inline (display:none, email css, etc).

There are a number of CSS methodologies out there that will help you discover best practices, I use this one: http://smacss.com/

I prefer the use of classes in my CSS style sheets and reserve IDs for jQuery use.

Upvotes: 3

Cameron
Cameron

Reputation: 1021

IDs (#) should only be used on elements that are not recurring such as a wrapper whereas classes (.) should be used for things that are used over and over again such as font styles or colours.

Similarly internal style sheets should be used when you only need to use that style sheet once whereas external stylesheets should be used when styles need to be used across an entire site. Some designers still prefer to use external stylesheets even if they only use it once so that it's easier to check or copy to another site.

Inline stylesheets should only be used if a single style is required once however most designers believe that this defeats the purpose of CSS altogether.

External style sheets are also chached and so it can decrease the speed that it takes for your site to load and save bandwidth.

Upvotes: 1

Related Questions