As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Has there been any attempt and creating a formalized method for organizing CSS code? Before I go and make up my own strategy for keeping things readable, I'm wondering what else is out there. Google hasn't been very helpful, as I'm not entirely sure what terms to search for.
I'm thinking more along the lines of indenting/spacing, when to use new lines, naming conventions, etc.
Any ideas?
Natalie Down of ClearLeft fame produced a really great slide show covering this topic and more http://natbat.net/2008/Sep/28/css-systems/
Download the PDF as it includes a lot more information than the slide show. I'd recommend this to CSS devs of all skill levels.
This is all very subjective as per the usual code formatting debates and I do not know of any formalized conventions.
The method I've chosen is to use all lowercase classes and ids with underscores separating words (#page_container for example). I declare all my tag styles first (html, body, ul, etc.), then all classes and ids, sorted alphabetically. Additionally, all the styles defined in each class, id, or tag are defined alphabetically as well. Using this convention makes it easier to track down a particular style.
For formatting, I always compress it as small as possible, but still legible. I put everything on one line with appropriate white space. If you have Visual Studio, you can specify this format and have it automatically formatted this way for you (Set Style to Compact rules under Tools, Options, Text Editor, CSS, Format).
Naming conventions are extremely subjective here, but the thing to keep in mind is to name your elements as their intended purpose, not their styled meaning. For example, if you have a company slogan you want to style in a large, red font name the id #slogan instead of #red_bold.
Here's a full example to give you an idea:
body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em; margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }
Here's a draft of how I order my css properties. It roughly follows the guideline of doing positioning and layout first, then typography, then backgrounds and other minor things. I try to order my properties by how they affect the box model as much as is reasonably possible. However, my ordering tends to shift around a bit. I'd appreciate any comments on this.
el {
display:;
float:;
clear:;
visibility:;
position:;
top:;
right:;
bottom:;
left:;
z-index:;
width:;
min-width:;
height:;
min-height:;
overflow:;
margin:;
padding:;
border:;
border-top:;
border-right:;
border-bottom:;
border-left:;
border-width:;
border-top-width:;
border-right-width:;
border-bottom-width:;
border-left-width:;
border-color:;
border-top-color:;
border-right-color:;
border-bottom-color:;
border-left-color:;
border-style:;
border-top-style:;
border-right-style:;
border-bottom-style:;
border-left-style:;
border-collapse:;
border-spacing:;
outline:;
list-style:;
font:;
font-family:;
font-size:;
line-height:;
font-weight:;
text-align:;
text-indent:;
text-transform:;
text-decoration:;
white-space:;
vertical-align:;
color:;
opacity:;
background:;
background-color:;
background-image:;
background-position:;
background-repeat:;
cursor:;
}
Personally I prefer to keep one property per line indented one tab, with the closing curly brace indented one tab. To me it's more legible this way, but that's definitely a matter of opinion/preference.
I used to tab indent css declarations to match my html parent/child relationships as much as possible, but I no longer do that. The grouping feature ofCSSEdit helps greatly reduce the temptation to do so.
CSS doesn't really have any prescribed convention for code structure. So it comes down to what works best for you.
Well I don't personally know of any convention per se, but I know there are a lot of recommendations out there that are really good idea to follow, but basically depends in how you want to implement your CSS for you to choose the one that fits you the most.
Files should be modularized, so you can make use of #imports. I typically have a base.css file for base classes (such as typography and colors). Depending on your site structure, it may be advantageous to also have other CSS "partials" to reuse throughout user-facing stylesheets. These descendant stylesheets can extend base styles with more granularity as needed (E.g., .warn {color:red;} might get extended by p.warn {font-style:italic;}, or h1.warn {border:5px solid red;}), which is a great design pattern for implementing so-called object-oriented CSS.
Within the files themselves, I like to alphabetize my selectors and property lists. I have tried maintaining separate lists for different types of selectors (an id list first, then my list of classes, and then my list of element selectors), but I've found this unnecessarily difficult, so I have all selectors in the same alphabetical list. That way I can quickly find the root of all complex selectors or any styles given to a simple selector.
Within complex selectors, I list each selector alphabetically.
If I can't use Sass for some reason, I might imitate its nesting pattern (I'm still unsure if this is working out or not), like so:
#import url('/css/base.css');
a {
color:#369;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-decoration: underscore; }
a img {
border: 0; }
blockquote, .nav, p {
margin-bottom: 10px; }
blockquote {
background: #eee;
padding: 10px; }
h1, h2, h3, h4 {
font-family: Georgia, serif; }
h1.warning {
border: 5px solid red; }
.nav a {
font-size: 150%;
padding: 10px; }
.nav li {
display: inline-block; }
p.warning {
font-style: italic; }
p.warning a {
background: #fff;
border-bottom: 2px solid #000;
padding: 5px; }
p.warning .keyword {
text-decoration: underline; }
Unfortunately, you may look for the margin for p and not realize that it's part of the blockquote, .nav, p. This also isn't very "object-oriented" design, but it's arguably better than putting strings of classes on virtually every element that requires styling.
So, this approach isn't perfect and doesn't completely free you from sometimes having to find-in-file, but it's the best approach I have developed when I cannot use CSS templating tools for reasons beyond my control. I would love to hear any suggestions on improving this method :)
Related
Could you please provide the best way of override and what is the advantages of this. For example.
1. example :
.ex1{
font-size: 12px;
color: green;
text-align: left;
}
.custom .ex1{
font-size: 14px;
}
2. example
.custom .ex1{
font-size: 14px;
}
.ex1{
font-size: 12px;
color: green;
text-align: left;
}
Which is one best way overriding, example 1 or example 2. if any advantages?
There is really not much of a difference because compiling css is really easy for todays machines. But from what i know if you use it as example 1, it wouldnt look into .custom .ex1 because .ex1 has already been defined.
But as i said, it does not really matter. Its like going to police because someone took tiny dust of your sugar
on css more you define an element more powerfull its css decleration for example in the exapmle you gave it is not the order gives override. It is .custom class, which defines .ex1 more specifically since order does not change anything in this case you can do both. But personally I like starting from general classes and continue to specifics. I dont know but it feels more natural. therefore I would use following. However as I said there are no functional difference in this case.
.ex1{
font-size: 12px;
color: green;
text-align: left;
}
.custom .ex1{
font-size: 14px;
}
Suppose you have code like this -
.main-class{
font-size:24px;
color:red;
}
<p class="main-class">Hi How are you?</p>
Best way to override this CSS is to use a sub class which will override some properties of parent class like this -
.main-class{
font-size:24px;
color:red;
}
.sub-class{
font-size:14px;
}
<p class="main-class sub-class">Hi How are you?</p>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Back to basics, I have neglected my CSS skills thus my CSS is a bit (very) rusty I'm working on a wordpress theme. The style.css themes default H2 style is coded as follows:
h2 {
font-size:1.7em;
background:url(images/heading_bg.gif) repeat top;
color: #fff;
padding:6px;
border-bottom:3px solid #e40001;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:normal;
}
This result in any <h2> tag inserted into a post looking like this:
This provides a nice look in the theme however in certain situations I would just like to have a basic unstyled <h2> tag thus I created the following class:
.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
MY Problem - What I want to Achieve
I would like to overwrite the default <h2> style of the theme in certain situations however if I add the above class to any <h2> tag the .normal class is ignored and it keeps on displaying the normal h2 rule....why is this? What am I missing? How can I overwrite the default h2 style at certain types?
This the snippet I worked out. Doesn't seems a problem to me. Go through this code carefully.
PS: color="red"; is wrong. Use
when you want to override some element, you gotta look at the rules used in that element. ie, you gotta remove the background if any, change margin, paddings etc.
color:red;
h2 {
font-size: 1.7em;
background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top;
color: #fff;
padding: 6px;
border-bottom: 3px solid #e40001;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.normal {
font-size: 1.4em;
font-weight: bold;
color: red;
font-family: 'Oswald', sans-serif;
background: none;
}
<h2>
hello
</h2>
<h2 class="normal">
Hello World
</h2>
You should mention all css properties of h2 in your .normal class, thus it will be something like this:
.normal {
font-size:1.4em;
background:none;
color: #FF0000;
padding:0px;
border-bottom:none;
text-transform:initial;
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
you can use the below code:
h2.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
which means h2 has a class normal then overwrite the styling
You may do one of these:
use .normal selector after h2 in your css file (assuming they have same specificity)
use !important in your .normal decleration
.normal{ propert: value !important; }
add some specifity to the .normal selector like:
h2.normal{ bla bla ...}
See the example code:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
I'm assuming the extra space is "built-in", but is there a way to remove it somehow?
I'm trying to left-align some huge page titles with the much-smaller subtitles underneath.
This has no correct way, because, it is the font that displays that way. Consider the below example:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
.serif2 { font-family: Times; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>
The above image has different layout if it is a serif in my computer. So, it is a trial and error basis and you have to make sure what you are doing is fine in all computers and browsers. The Times font fits perfectly and the serif font has some space. This is why I said it is a trial and error method.
The only hacky solution is to use a negative margin for the content, based on the font and you cannot generalize it.
You could add a minus margin-left. See here: https://jsfiddle.net/mna56yf9/5/ But if you're planning on having a background color, you might have to apply it to a wrapping div.
span{
margin-left: -20px;
}
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
I'm trying to use Bootstrap inside a sharepoint site. Unfortunately the CSS styles are applying to the template's HTML which is messing with the design a fair amount.
I know that everything I want affected by bootstrap is within #s4-workspace - does anyone know any CSS tricks I can use to apply bootstrap only to children of that element?
I'm not beneath shudder recompiling the LESS code encasing it like so:
#s4-workspace {
#import "reset.less"
// etc
}
But, naturally, I'd like to find a better solution if I can. That particular approach also doesn't seem to work.
I cannot alter the CSS of the Sharepoint master site.
Any advice welcome!
Thanks,
The only real way of doing this is by using iframes or jQuery, if you want to apply only specific elements of the bootstrap perhaps edit the CSS rules so they apply to a different ID/Class.
For example, where it says body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
In the bootstrap.css file simply change it to read .bootbody(or#bootbody) {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Joseph Silber said it better in this question.