I'm pretty inexperienced with CSS, but I know from past experimenting (and other threads on SE) that it's best practice to close the final line of a CSS block with a semicolon, although it's technically optional.
ie:
p {
font-family:helvetica;
font-size:16pt;
}
as opposed to:
p {
font-family:helvetica;
font-size:16pt
}
BUT on the site I'm designing now (a Wordpress template actually), when I add the semicolon to that final line, the browser refuses to acknowledge that instruction AT ALL. But if I leave off the semicolon, it works!
I'm going to assume I'm doing something wrong here, because it should work identically both ways. Any idea what's going on?
As requested, here's a sample of my actual code. It affects the whole stylesheet, so I just grabbed a few blocks at random...
.post p
{
margin-bottom: 2em
}
.footer
{
width:60%;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 4em
}
#nav-below
{
background-color: #dde4ec;
width:100%;
height:3em;
padding-top:1em
}
#nav-container
{
background-color: #fff;
width:30%;
margin-right: auto;
margin-left: auto;
margin-top:1em;
margin-bottom:2em
}
Don't know if this will be any help, but thanks nonetheless.
Related
Let's say that I wrote html file with a lot of objects in it, and this file is styles with one css file. In that css file I could have in some lines same code.
For example:
.header {
color: #fff;
margin-left: 10px;
}
.leftLayer {
margin-left: 10px;
padding: 4px;
}
So, I have margin-left: 10px; twice repeated. If .header and .leftLayer are not one bellow the other in code and on the page screen, what is the best solution? Is it to write code like this or something else?
.header, .leftLayer {
margin-left: 10px;
}
.header {
color: #fff;
}
.leftLayer {
padding: 4px;
}
This is simple example, but I need universal solution which can be applied for many div-s that have some same css values.
If I have something like the code below I would expect my link to be in red color with large fonts, it does not work, however.
.footer {
text-align: center;
}
.footer a {
color: red;
font-size: 32px;
}
Live example: http://jsfiddle.net/avUT4/
I don't understand. I'm not good at css but why this code does not work?
There is some strange character in front of the .footer a rule. Try copying the code to jsbin.com and you'll see it marked by a red dot. This happens to me a lot when copying from jsfiddle. If the char is removed, all is good.
Here is your fiddle, without that character.
As far as I can tell you have a garbage character somewhere. I rewrote it and it's fine.
.footer
{
text-align:center;
}
.footer a
{
color:red;
font-size:32px;
}
http://jsfiddle.net/avUT4/10/
I think this is a bug in jsfiddle. If you just define:
a {
color: red;
font-size: 32px;
}
It works. Then if you add .footer (just type it back in before "a"), it works still, but it won't work from the start point when ".footer a" is defined.
try this:
.footer {
text-align: center;
}
.footer a:link, a:active {
color: red;
font-size: 120px;
}
I have two classes, left and right, that float and clear things left and right (real crazy stuff).
But here's the problem.
.dashWrap h3 {
background-color: #666;
border: 2px solid #000;
/*border-radius: 0.5em 0.5em 0 0;*/
text-indent: 0.5em;
}
.dashWrap .dashContent {
/* max-height: 5em;*/
min-height:5em;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid #000;
border-top-color: transparent;
}
.right //If I delete or comment this out, left no longer is applied to anything.
{
clear:right;
float:right;
width:35%;
}
.left
{
float:left;
clear:left;
}
.right //If I delete or comment out this, right no longer is applied to anything.
{
clear:right;
float:right;
width:35%;
}
That's the exact section I have in the file I am editing. the only difference in the actual source file when I load the website is that after the closing curly for .dashContent, there is this :
​
What could be causing this?
You have some invisible or corrupted characters in you file, so the first rule after the .dashContent will be broken and is ignored by the browser.
Try to delete everything between the rules to get rid of the invisible characters, and if that fails you can try copying the rules into a new file. If all else fails, you may have to retype part of the file.
I'm currently working on a team that uses SASS. I see that we are extending styles that are very simple and to me I don't see the benefit of doing this. Am I missing something?
Here are some examples of a _Common.scss that is imported and used throughout other sass files:
.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }
.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }
.height-percent-100 { height: 100%; }
.cursor-pointer { cursor: pointer; }
.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }
Example:
#CategoriesContainer
{
ul{
li{
&:first-child{
#extend .font-11;
}
a
{
#extend .font-11;
#extend .text-decoration-none;
}
}
}
}
You should only use extend when you have a certain attribute set that will be used multiple times. The sheer stupidy of extending a class with a class with one attribute that has the unit value worked into the name of it is incomprehensible.
A better example for a reason to extend can be found in the reference guide
Say we have 2 classes
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
.error is a general no interesting style but a serious error should be really clear.
.seriousError is created to thicken the line, the only problem is that now we have to use both classes in the html to combine the styles.
Because we're lazy and just want to use one class and not duplicate code that might be changed in the future we can extend .seriousError with .error
.seriousError {
#extend .error;
border-width: 3px;
}
Now we didn't duplicate the code in our sass file but did get the right styles on the page.
Check out the reference guide for more/better examples.
Just please for the sake of kittens stop extending classes with one attribute classes. And don't implicitly state the value/attributes in the selector, thats not very semantic.
You, and your team, should read this post which explains a few problems with the aproach you take here vs semantic code. Couldn't find a better tuned post this quick.
You aren't missing anything, this is just bloated code in poor form and not a great way to extend classes.
There is maybe one (bad) reason I can imagine why this would be used. If for example .font-10 needs to be .7em instead of 10px, it can be easily changed - but then you've just defeated the point of naming the class "font10". Something like small-font would even make more sense in that case (and I'm not suggesting you use that either).
I won't discuss the merits of semantic class names and the folly of presentational ones (especially as literal as these are), but I will suggest that this is a very narrow use of extending classes. With a 1:1 mapping of class name to property/value, you've practically defeated the purpose of #extend, which is supposed to make you write less CSS.
Better example of what to use #extend for:
.media {
padding:1em;
border-color:blue;
background-color:red;
clear:left;
}
.my-media {
#extend .media;
background-color:green;
}
Atomic CSS
The technique of very simple CSS rules does have a bit of precedent - at Yahoo! they call it Atomic CSS. Thierry Koblentz argues in this Smashing Magazine article for using the simple classes directly in your markup, similar to inline styling. This can be helpful on very large projects across multiple web properties, where styles are not consistent. Base styles for OOCSS components can't be reused as much in such a situation, causing you to have to write many more lines of extension classes or overrides.
The downside is, of course, as Wesley mentioned, that it is much more difficult to make changes across your entire project's styles, such as updating the text size of a specific selector.
I've been playing around with a variant of this technique recently in a fairly large project, where styles can often be one-off. In an effort to avoid the I try to avoid putting hard values directly in the selectors. For instance, the following css (example fiddle):
_colors.scss
.text-white {
color: $white;
}
.blue {
#extend .text-white;
background: $blue;
}
_effects.scss
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 40px;
}
.matted {
border: 4px solid $white;
}
.shadow {
#include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}
HTML:
<div class="blue matted circle shadow">?</div>
Specificity issues
One last thing to keep in mind if you decide to use this technique - it can cause specificity problems if you're extending base-level classes that use the same CSS properties. For instance, in the following example (fiddle), how would your border-radius appear? You wanted the top to be squared off (no border-radius) but this isn't happening, because the .circle class is further down in your css and just as specific (single class) as the other effects. This is a bit of a contrived example, but if you reuse CSS properties across your atomic selectors, this can be a real problem.
_colors.scss
.text-white {
color: white;
}
.blue {
#extend .text-white;
background: royalblue;
}
_effects.scss
.squared-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded {
border-radius: 10px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
HTML:
<span class="circle blue rounded squared-top"></span>
If you do it that way you can also use it directly in the HTML - so it looks like they took the OOCSS path and because it's already in the CSS you can now also extend to it. Very flexible but it could also turn very messy.
Extend option is used poorly here. It should be used for extending classes with more content and in that case extend can be very helpful.You can find more about extend and its options here.
I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}