In large projects...
Which one is Faster and Optimized?
Which is better for browser and traffic?
*1.
.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
width:44%;
float:left
}
.class1{
line-height:40px;
text-align:left;
margin-left:4%;
width:34%;
float:right
}
.class2{
line-height:40px;
text-align:left;
margin-left:4%;
width:44%;
float:left
}
*3.
.class1,.class2{
line-height:40px;
text-align:left;
margin-left:4%;
}
.class1{
width:34%;
float:right;
}
.class2{
width:44%;
float:left;
}
*new update suggested by #connexo.
Sepas for your time!
This is how I'd do it. Put all properties both classes share in one block, then define deviating properties solo after that.
.class1,
.class2 {
line-height: 40px;
margin-left: 4%;
text-align: left;
}
.class1 {
float: right;
width: 34%;
}
.class2 {
float: left;
width: 44%;
}
Aside from that structural thing I'd recommend to sort the declarations alphabetically and do not omit the semi-colon after the last declaration in a block.
I am not sure if the question is correct. In case of CSS, I would ask how easy it will be to maintain it. When you work on bigger websites, updating 1 piece of style declarations is better than updating 10 pieces of declarations. If you are sure that class1 and class 2 behavior will always be the same, I would go with the first example. It will be easier down the road to find what exactly needs to be updated.
Both examples will not affect the performance any noticeably, also, they have nothing to do with SEO (to the best of my knowledge).
I hope this answers the question...
There are several things you should pay attention to:
1. Use shorthands
This will reduce unnecessarily used space. --> Optimized the traffic
2. Minify your code
Same as for 1.
3. Split up your CSS - Code (Critical Above the Fold CSS)
This is a very effective way to optimize your page speed. You can put the code for the first view that the user can see at the top of your page and the rest at the bottom. Then the browser can render the page, without completely downloading the page.
4. Use inline CSS
This is not the beautifulest solution, but it can impair the performance. But do not write all of your CSS inline, only some small parts.
Related
I am looking to improve the style of a Wordpress site.
I have a div with the group-input class which has this style:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
I would like that below 572 px of screen we switch to float : left so I wrote this below the previous code, in my theme's CSS file, like this:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
#media (max-width: 572px) {
.group-input {
float: left !important;
}
}
On the other hand it does not work, the new style does not apply to my div.
suddenly I don't know how to do it. Do you have an idea, a lead to advise me?
I want some explanations, something simple for you is not necessarily obvious to me suddenly I need to understand. Thanks for your time and help.
In general, that should overwrite the css rule you are trying to do, but it's probably another css rule that more specifically targets that element. A few reasons it may not be overwriting is because:
another css rule is more specific than yours
it's in a breakpoint more specific than yours
it uses !important
A combo of all of those will require you to be even more specific in targeting the element.
If you find you are unable to overwrite a rule, try and be more specific in your targeting of the element by targeting it's grandparent/parent and working down the html tree. If you notice that that isn't working either, then try using !important.
Check the html structure around it try that. Sometimes even body .group-input might be specific enough, but the closer you specify to the element, the better off you will be.
The basic idea is that I have a sidebar div tag that I have been tweaking with the CSS, and I want to do everything in the same place:
.sidebar{
border: solid;
float:left;
margin-right:-100px;
margin-top: -200px;
width:200px;
}
.sidebar h2{text-decoration:underline}
This is what the code looks like right now and it technically works but it looks like bad practice to me and I want to add the bottom bit that changes h2 to the main chunk on the top which has everything else in it but I don't know how to incorporate it.
I imagine that this is fairly straight forward and I'm just missing something.
I think what you're thinking about is using a CSS preprocessor that allows you to combine multiple child classes into one big class, giving it a nicer look and feel, like this:
.sidebar{
border: solid;
float:left;
margin-right:-100px;
margin-top: -200px;
width:200px;
h2
{
text-decoration:underline;
}
}
For this you can use LESS. More info on it here: LESS CSS
Question: Is the second OOCSS principle really valid?
According to the OOCSS second principle you're not supposed to have location dependent styles:
Quote from https://github.com/stubbornella/oocss/wiki
Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific h2 with .myObject h2 {...}, create and apply a class that describes the h2 in question, like h2 class="category".
Lets take a practical example of this. Say I have a standard 2.0 setup with a normal body (white background) and a huge footer (black background). In the body we have black links and in the footer of course we need white. Isn't the simplest and most intuitive way to achieve this simply to:
a{ color: #000; }
.footer a{ color: #FFF; }
If I where to follow OOCSS principles I'd have to first create a class:
.inverted{ color: #FFF; }
Then proceed to add that class to every link I want inverted. That seems like a hassle.
Isn't the purpose of the whole language that styles are made to Cascade?
Am I misunderstanding something here?
I think you are right in the sense that yes, in your specific example.. perhaps doing it your way would be easier. But then again, if you look at the first sentence in the OOCSS page:
How do you scale CSS for thousands of pages?
In that context.. the second principle makes perfect sense.. so using your same example (ie let's assume we implemented your solution).. let's say that a year down the road your company decides to create light grey buttons in the black footer having black text:
<!-- inside footer -->
<a class="button lightGrey">link</a>
in this case.. all the a tags will be white because they're covered by your cascading. So then we will have to go create another sytle just to undo what your solution did:
.footer a.button.lightGrey {
color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/
}
where as if we simply made a decision that all a tags by default are black (see last note):
a{ color: #000; }
then in the footer we will create a special type of link that are supposed to be white:
.footerLinks { color: #FFF }
then a year later some of the links are still white.. others within the greyLight button will be black:
<a class="button lightGrey">link</a>
then here we don't have to worry about undoing anything.. a tags have a default color.. and that's it. if 2 years later someone decides that the links inside the lightGrey buttons (anywhere on the site, not only withen the footer.. which is the whole point of OOCSS) should be red.. then this would be the OOCSS approach:
.redLink {
color: red;
}
and the html will be
<a class="button lightGrey redLink">link</a>
in this case it won't matter if we take out the .lightGrey class, or we can have this code within or not within a footer .. it's all the same.. it results in more predictable and re-usable code.. which is OOCSS (I'm very glad that they're finally formalising this.. thanks a lot for the post btw).
One last note: To be pure OOCSS, one shouldn't change the default color of a ie a {color: #000;} is wrong!, it should be left to it's default color (which is blue).. whenever anyone wants to change that color.. then they must specify it ie
<a class="redLink">..</a>
so in this case it's more like the default a is the parent class.. and everything else subclasses it and overrides its default behaviour..
update - response to comments:
reputable site argument:
such initiatives are almost always driven by the community then adopted by reputable companies.. and even when they are adopted by larger companies it usually happens from the bottom up through enthusiastic developers who advocate for such change.. I for one was such an advocate when I was working in Amazon. And even when it's adopted.. it's usually at a small scale and not across all units in the org. it wouldn't even be a good idea for the Googles and the Amazons and the facebooks etc to enforce such a rule b/c there will always be a difference of opinion.. not to mention that such micromanagement would constrain the engineer's creativity.. there could be a guideline in a wiki for a team (ie we had one for the Amazon Kindle Touch app store) but to enforce that rule across 10,000 engineers working across the company wouldn't be practical nor desirable.
So in short if you see value in OOCSS, and start implementing on your site, and advocating it to your fellow web devs, and then it becomes a trend, that's when it eventually becomes an industry wide best practice and that's when you can expect to see it on facebook etc.
example:
take a look at this:
simple: http://jsfiddle.net/64sBg/
a bit more detailed: http://jsfiddle.net/64sBg/2/
without going too much detail (I'm sure you will see the pattern) you can see that the granularity in css descriptions allows for subtle changes without any redundancy in style definition. So notice the left arrow vs right arrow.. also the .red and .blue styles can be subsequently applied to tables etc..
also notice that there isn't a single cascading in my css.. so my styles can be completely independently applied (ie implementing the rule An object should look the same no matter where you put it)
lastly.. there is still use for cascading.. you can definitely use it in your jQuery selectors for example.. also cascading happens by default (ie without you having to explicitly set it in your css styles).. so if you take look at the css below.. you will notice that the font properties of body has cascaded down to all the buttons.
<a class="button blue dark">
<div class=" arrowDownWhite rightArrow">Analytics</div>
</a>
<a class="button red dark">
<div class=" arrowDownWhite leftArrow">Actions</div>
</a>
<a class="button grey light">
<div class=" arrowDownRed leftArrow">options</div>
</a>
and css:
body
{
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 15pt;
}
.button
{
padding: .5em 1em;
display: inline-block;
text-decoration: none;
}
.dark {
color: white;
}
.light{
color: #E40E62;
}
.blue
{
background-color: #51C8E8;
}
.red
{
background-color: #E40E62;
}
.grey
{
background-color: #E0E0E0 ;
}
.arrowDownWhite
{
background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png);
background-repeat:no-repeat;
}
.arrowDownRed
{
background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
background-repeat:no-repeat;
}
.leftArrow
{
padding-left: 1em;
background-position: left center;
}
.rightArrow
{
padding-right: 1em;
background-position: right center;
}
It is worth the hassle of separating your skin from the container.
Lets look beyond colors. I wish Nicole Sullivan provided better examples than she does. I have 23 web sites that an contain
Menus
Tabs
Toolbars
Horizontal and Vertical Lists of Links
All of them are Skins of the Nav abstraction
I started off created an abstraction class to handle the common code between all of them. I added a few modifiers to change the orientation from horizontal to vertical, and also the floated position of it. I kept all colors out of the abstraction as well as css rules that can change based on the skin I apply to it.
/* Object */
.nav
{
margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
/* Modifier */
.nav--stack .nav__item
{
display: block;
}
.nav--right
{
float: right;
}
/* Elements */
.nav__item
{
float:left
}
.nav__item__link
{
display:none;
}
Menu Skin
I needed a skin that made the .nav abstraction look like a sidebar menu. In case you are wondering, I did not put the padding for .nav_item_link above is because it can change based on the skin. The tabs skin has it set for 2px.
/* Object */
.menu
{
}
/* Elements */
.menu .nav__item--current.nav__item__link
{
color: #fff; background: blue;
}
.menu .nav__item__link
{
padding: 4px; border-radius: 4px;
}
.menu .nav__item__link:hover
{
background: #eee
}
Notice to keep things location-independent - I have 0 tag names. I don't style li and a children on .nav like bootstrap does. This code could be used on dls or even divs and has better performance based on how selector engines read rules.
To me the benefit of just having to skin the objects I have for all 23 sites I have is worth any hassle.
Iam needing help with my footer in CSS.
I'm a new wordpress developer and I get the gist of how to work with it but as usual I've run into a problem, it's probably simple too, as I'm not sure exactly how to pick out the certain CSS snippets I need. I use Firebug but sometimes I just not sure whats happening with my CSS I guess.
This is my testing site so you can have a look at what I'm going to be talking about. In my footer, my last < li > element (the Archives) I'm hoping to get up right underneath Follow Us. I can always us the last child css rule however I know IE ignores that. So whats my next option? I know what to do if wordpress has given the lists individual styles but in this case it hasn't, so I'm not sure what to do.
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
.footer-widgets { width: 960px; margin: 0px auto; padding: 0px; /*border: 1px solid #fff;*/ }
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
What is the best way to make this work? Any help is appreciated!
If you need to support browsers that do not accept a :last-child selector then you have two options.
Manually add a class to the last element and style it.
Use javascript to find the last <li> and add a class, then style it.
[edit]
Unfortunately, the very handy lastElementChild that was introduced in the W3C Traversal Spec is also not supported in IE8/7. That leaves you, again, with two options.
Use a library like jQuery, which has very simple $('.footer-widgets li:last-child') selector
Use regular js and find the element through tedious DOM traversal.
I would say it's silly to use jQuery for this one thing, but if you will be doing other javascript stuffs on your site, might as well use jQuery, right? Otherwise, I would stay away from the DOM traversal as it's just a pain. Just manually put a class on the last <li> and be done with it :)
There are 2 alternatives I see:
Add a class to your last element and take it with JavaScript to do your own manipulation.
Use jQuery to get the nested elements (unnecessary I think).
Example:
$('.yourElement').css('property', 'value')
Complement:
Getting any element with JavaScript:
var x = document.getElementById("id");
I suggest you to take a look at this W3C documentation with an example. Right after you get the element with JavaScript comes manipulation anyway you need it.
I think it may help you!
Ive been handed a design that has a particular header with style the type knocking out a rule like:
------ Text Content ------
Ive done this a couple times over the years but i was never happy with my solution. Usually it involved using numerous elements. Since these are headers id like to keep the markup as lean as possible.
My first thought this time around was to use box collapsing to my advantage: http://jsfiddle.net/cEcCL/
However there a are few problems here:
This relies on setting the background of the span to something opaque in order to knockout the line. Problem is most of these will probably be in the upper portion of the page where the gradient background hasnt yet faded to its solid
Actually i wasnt aware of this till i made the fiddle - the text seems slightly off center, not sure why that is.
While it can probably be managed, Im worried about the robustness of the vertical offsets to center the line on the median of the text line-box.. What if i have long header that goes to 2 lines?
Does anyone have any other ideas?
Here's a very quick example that uses a single h2 and the before/after pseudo elements.
h2:before, h2:after {
content:' '; display:inline-block;
height:0; width:100px;
border-top:1px solid black;
vertical-align:middle;
margin:0 1em
}
Obviously, there are some drawbacks:
No IE6/7 support
As it stands, you have to explicitly declare a width for the lines (but you might be able to mess with this)
Doesn't handle multiple lines too well, but again, you might be able to edit the h2 styles to make this work a little better
While not a perfect solution (I feel your pain here, this is a tough one), sometimes you can use background-attachment:fixed to remedy the background issue using the <span> technique if you are using a background image:
Demo: http://jsfiddle.net/cEcCL/3/
<h2><span>Text Content</span></h2>
h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
background:url(background.gif) fixed;
}
h2 {
line-height: 10px;
font-size: 18px;
text-align: center;
padding: 5px 0;
}
h2:after{
content:" ";
float:left;
border-bottom: 1px solid #000;
width:100%;
height:10px;
margin-top:-15px;
}
Of course this only works if the parent element can have a fixed background image, and won't work with CSS3 gradient backgrounds. It's a limited-use idea, but I just thought I'd bring it to light.
It seems only <legend> tags have this behavior, and I know of no way to emulate that with CSS, and I don't think you don't want to start using <legends> for headings...