Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.
For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.
Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.
I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.
Oh yes, I also like to add the designer's palette to the top for quick reference.
For example...
/*
PALETTE:
dark grey : #555555;
pink : #d93575;
*/
/* HEADER */
#header {...}
#header ul {...}
/* SIDE BAR */
#side {...}
#side ul {....}
/* CONTENT */
#content{...}
#content p {....}
/* FOOTER */
#footer{...}
#footer div {....}
/* FORMS */
form {...}
input {...}
/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}
These guys advise you to "Organize the Stylesheet with a Top-down Structure" ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. In MVC for instance - you can regiser styles on a per-view basis. That way you can put view-specific styles in a specific style sheet while not messing with your 'shared' or 'layout' one.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
this is my first post so excuse me if I'm doing anything wrong. My question is how should I layout my CSS files? Just curious to see if there's a "right way" CSS should be written. Thanks!
Understanding how browsers parse CSS and render websites is an important first step towards writing more efficient code.
There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */
You can refer below articles to write more efficient CSS
Efficiently rendering css
Writing efficient css selectors
You can indent your css. Or minimize it at the end of the project.
You can use plenty of websites that can help you to do it.
That's an example - CleanCSS
CSS should be laid out by specificity.
IDs are more specific than classes which are more specific than tags. Therefore you would want general tag styles at the top of your sheet and then classes and the IDs.
p { }
.p { }
#p { }
You can also, matter of preference, in large projects, separate CSS styles into different sheets to make it easier for other people to read through your code.
CSS is whitespace insensitive so it tabbing will not make the compilation change, but it is of course common practice to tab accordingly.
There are plenty of other rules that many programmers follow, but the majority of them are opinionated so it is up to you to adopt an efficient way to layout your CSS. Even the rules I have stated will not "break" your CSS if not used, but they tend to help cause less problems. Research this topic further and try and adopt a set of rules to follow and stay consistent with them.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In an online tutorial, I was recently told to create a class for nav elements called "nav". I'm a beginner in CSS, but is it just me, or is this redundant/confusing/bad practice?
NO it's not redundant.
YES it's redundant if you think in your specific case you're fine with nav{ /*blaah blaah*/ }
<nav> is a Semantic HTML5 tag that represents toward SEO a navigation. A navitagion is all you want it to be. So in the case you have multiple nav elements in our page and you're OK to target-styles directly the tag element using nav I'll be glad to see that.
It's not redundant. The DOM element nav is different from the CSS class nav.
If you wanted to style this element by class, you would use this style declaration (for example):
.nav { background-color : #F00; }
if it were styled by element type it would be:
nav { background-color : #F00; }
This may seem trivial, but that period . makes a difference. It means you are identifying the item by class and not by element name. If you use the class syntax (with the .) then you could also write:
<div class="nav"></div>
This would show with a red background if you included the class definition, but not if you styled the element type directly.
In simple applications you may be able to get away with directly styling element types (e.g. <nav>) as opposed to classes (e.g. class="nav"), but as you get more complex layouts you are going to want to use classes. Additionally, if you use a selector-based library like jQuery, or document.querySelect() you may have good reasons for specifying a class.
If you truely can know that all <nav> elements can be styled the same in all your pages, then by all means just use the element selector, but to leave yourself flexibility it's best to use classes.
This question already has answers here:
Conventional Order of CSS properties [closed]
(9 answers)
Closed 8 years ago.
Is there a correct order to put your CSS properties in? I've never been told to put my properties in a certain order. I guess it's personal preference?
Server side languages have various standards you can code to. Are there standards for CSS?
I tend to do:
.element
{
/* display: */
/* position:, top:, right:, bottom:, left: */
/* width:, height: */
/* margin:, padding: */
/* color:, font: */
/* background: */
/* border:, border:radius: */
/* z-index: */
}
Though there is no standard around it.
And probably that's how a declarative DSL should be.
The following links might give you an idea on how you can form a standard for your domain
Conventional Order of CSS properties
CSS Lisible
CSS Comb
Order Your CSS Properties
I think there isn't a correct order to do that, you just do the way you want and try to organize the css properties the best way you can.
As far as I'm concerned, there isn't a specific order. Late properties shadow others, but that's all
There isn't a commonly-used standard (in my experience - ten years writing CSS, freelance at various different companies for the last 6, all in the UK).
I suspect this is because it doesn't matter that much. Assuming you have no duplicate properties, the order doesn't affect how the code works, and although it's a bit easier to read when property order is consistent, it's obviously easier when writing to go with whatever order your brain comes up with.
CSS Tricks did a poll on CSS property order last year. The most popular answer was "grouped by type" (closely followed closely by "randomly", i.e. no particular order), although "type" doesn't seem to be defined specifically.
Google's CSS Style Guide decided on alphabetical order for properties.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My website is a simple one using images. The whole site content is based on the menu's div tags. I added link using tag and created separate hover effects for it using different , now what happens is when i hover that link the same hover effect that appears for menu occurs and the hover i created for the link doesn't work. I can close menu's div only at the last[as the alignment is getting changed if i close the menu's div before the link and use a different div for the link]. Please suggest a solution, if u want me to post the code to make it clear please tell it. Thank you.!
its best to make sure that your making sure the pseudo-class is specific to a certain node. This can be achieved by going :
#(div name) a:hover {
color: blue;
text-decoration: underline;
}
it'll ensure that the a attribute nested inside of the specific div is being referenced.
You can use attribute selector, to select particular link, or type of link, based on what's in markup: Here's example:
a[href="www.yoursite.com"]:hover { color: red; }
You can take any attribute that's inside your html tag, to select (id, class, href, title, alt etc. even made up attributes).
You can take it step further, by using ,,similar'' operator, which selects element based on, if specified phrase exists in the attribute (but it's not exactly same). For example:
a[href~="https"]:hover { color: red; }
Will select all links with https inside href atribute.
Remember, that attirbute selector isn't suported in ie6, and is problematic in ie7, keep that in mind, you can look for workaround easly tho.
I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.