6 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Hey guys , i recently joined this new organization , where basically i code the HTML/CSS/JS in the frontend and then later those pages are integrated into a custom CMS in the backend.

Ok so now i am into this habit of making contextual stylesheeets , so i will have alot of stylesheets while developing , it really helps me and i find contextual stylesheets to be extremely helpful. but lately , the backend developers came back to me and said that when they combine all the stylesheets , some of the styles were clashing , this happened atleast in 2 of my projects , so obviously its got to do with my coding style.

I usually like to keep things less strict and i would mostly have no more than two levels of nesting , something like

.parentclass .childclass

below is typically how i code a style sheet:

/* 
{
	color-pallet {
		blue : #1b1464,
		bg-grey : #f7f7f7;
	}
} 
*/
 
@import url(<a href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700,800" rel="nofollow">https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700,800</a>);
h1 {
    font-size: 2em;
}
 
h2 {
    font-size: 1.8em;
}
 
h3 {
    font-size: 1.6em;
}
 
h4 {
    font-size: 1.4em;
}
 
h5 {
    font-size: 1.2em;
}
 
p {
    margin-top: .5em;
    margin-bottom: .5em;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
}
 
h1,
h2,
h3 {
    font-weight: 500;
    margin-top: .5em;
    margin-bottom: .5em;
}
 
h4,
h5,
h6 {
    font-weight: 400;
    margin-top: .5em;
    margin-bottom: .5em;
}
 
h2 {
    color: #1b1464;
}
 
html,
body {
    font-family: 'Open Sans', sans-serif;
    height: 100%;
}
 
body {
    font-size: 14px;
    color: #555555;
    padding-top: 125px;
}
 
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: #eee;
}
 
.btn-assessment {
    background: #1b1464;
    color: #fff;
    text-transform: uppercase;
    padding: 1em;
    font-weight: 700;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
 
.btn-assessment:focus, .btn-assessment:active , .btn-assessment:hover {
    background: #fff;
    background: rgba(255,255,255,.5);
    color: #1b1464;
    border: 1px solid #ddd;
/*    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
*/}
 
body > section {
    padding: 3em 0;
}
 
section > header p {
    font-size: 1.07em;
    margin-top: 0;
    margin-bottom: 0;
}
 
section > header {
    text-align: center;
}
 
@media (max-width:992px) {
    body {
        padding-top:.5em;
    }
}
 
/* navbar code */
 
.navbar {
    height: 125px;
    text-align: center;
    margin-bottom: 0;
    background: #fff;
}
 
.navbar [class*="nav-"] > li > a {
    position: relative;
    text-transform: uppercase;
    font-weight: 700;
    color: #1b1464;
}
 
.navbar .brand-logo {
    display: inline-block;
    padding: 1.79em 0;
}
 
.navbar .brand-logo img {
    width: 199px;
    -webkit-transition: all .1s;
    -ms-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}
 
.menu-btn {
	background: transparent;
	border: none;
	outline: none;
	color: #1b1464;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.5em;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
 
.navbar .nav-mini { 
    display: none;
}
 
.navbar .nav-mini.open {
	display: block;
}    
 
@media (max-width:992px) {
 
 
    .navbar {
        height: 50px;
    }
 
    .navbar .nav-left,
    .navbar .nav-right {
        display: none;
    }
 
    .navbar .nav-mini {
        position: absolute;
        top: 100%;
        background: #fff;
        z-index: 9999;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.1);
        box-shadow: 0 0 2px rgba(0,0,0,.1);
        width: 100%;
        z-index: 9999;
    }
 
    .navbar .nav-mini li {
        padding-top: 1.07em;
        padding-bottom: 1.07em;
        border-bottom: 1px solid #eee;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s;
    }
 
    .navbar .nav-mini li:hover , .navbar .nav-mini li:focus {
        background: #1b1464;
    }
 
    .navbar .nav-mini li:hover a, .navbar .nav-mini li:focus a {
        color: #fff;
    }
 
 
    .menu-btn {
		display: inline-block;
    }
 
    .navbar .brand-logo img {
        max-width: 100px;
    }
 
    .navbar .brand-logo {
        padding: .5em 0;
    }
}
 
@media (min-width:992px) {
    .nav-left {
        float: left;
    }
 
    .navbar .nav-mini {
        display: none;
    }
 
    .navbar [class*="nav-"] > li a:after {
        position: absolute;
        opacity: 0;
        content: '';
        left: 20%;
        right: 20%;
        bottom: -10px;
        background: #1b1464;
        height: 2px;
    }
 
    .navbar [class*="nav-"] > li a:hover:after {
        -webkit-animation-name: nav-line;
        -o-animation-name: nav-line;
        animation-name: nav-line;
        -webkit-animation-duration: .3s;
        -o-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
 
    .nav-right {
        float: right;
    }
    .navbar [class*="nav-"] {
        padding: 3.93em 0;
        -webkit-transition: .2s;
        -o-transition: .2s;
        transition: .2s;
        -webkit-transition-delay: .1s;
        -o-transition-delay: .1s;
        transition-delay: .1s;
    }
    .navbar [class*="nav-"] li {
        display: inline-block;
        margin-left: 2.14em;
    }
    .navbar .nav-left li:first-child {
        margin-left: 0;
    }
    .navbar .nav-left li:last-child {
        margin-right: 2.14em;
    }
 
    .menu-btn {
    	display: none;
    }
 
    /* when scrolled */
 
    .navbar.scroll-nav {
        height: 50px;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
        box-shadow: 0 0 3px rgba(0,0,0,.2);
    }
 
    .navbar.scroll-nav [class*="nav-"] {
        padding: 1em 0;
    }
 
    .navbar.scroll-nav .brand-logo{
        padding: .5em 0;
    }
 
    .navbar.scroll-nav .brand-logo img{
        width: 110px;
        /* position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 0;
        padding: 0; */
    }
 
    /* end of scroll navbar code */
 
}
 
 
/* end of navbar code */
 
 
/* code for banner  */
 
.carousel {
    min-height: 450px;
}
 
.carousel-caption {
    color: #1b1464;
    text-align: left;
}
 
.carousel-caption h1 {
    font-size: 2.18em;
    margin: 0;
}
 
.carousel-caption .advantages {
    margin: 2.5em 0;
}
 
.carousel-caption .advantages li {
    margin-bottom: 1.62em;
    /* intended 26px */
}
 
 
/* end code for banner  */
 
 
/* banner code */
 
.contact-bnr {
    /*REFAC:: remove style;*/
    height: 450px;
}
 
.banner > .container {
    position: relative;
    /* CHECK:: maybe an issue; */
    height: 100%;
}
 
.home-bnr {
    height: 450px;
}
 
.home-bnr .banner-content {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 15px;
    padding-right: 15px;
}
 
.banner .banner-content > ul.advantages {
    max-width: 445px;
}
 
.banner-content {
    color: #1b1464;
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
}
 
.banner-content h1 {
    font-size: 2.5em;
    margin: 0;
}
 
.banner-content .advantages {
    margin: 2.5em 0;
}
 
.banner-content .advantages li {
    font-size: 1.21em;
    margin-bottom: 1.47em;
    /* intended 26px */
    line-height: 1;
    margin-left: 1.88em;
    /* margin-left: 1em; */
}
 
.banner-content .advantages li:nth-of-type(3) {
    line-height: 1.5;
}
 
.banner-content .advantages li i {
    position: absolute;
    left: 15px;
}
 
.banner ul.carousel-dots {
    margin-top: 3.57em;
}
 
.banner ul.carousel-dots li {
    height: 13px;
    width: 13px;
    display: inline-block;
    background: url(../img/res/carousel-dots.png) 0 0 no-repeat;
    margin-right: 0;
    cursor: pointer;
}
 
.banner ul.carousel-dots li.active {
    background-position: -13px 0;
}
 
 
@media (min-width:1900px) {
    .home-bnr {
        height: 600px;
    }
}
 
/* banner code */
 
 
/* tools section here */
 
.tools {
    background: #f7f7f7;
    padding: 2.85em 0 0 0;
}
 
.tools > header h2 {
    font-size: 2.85em;
    margin-top: 0.25em;
    margin-bottom: 0.62em;
    /* below 3 styles should be made global ? */
    font-weight: 300;
    text-transform: uppercase;
    color: #1b1464;
}
 
.tools > header p {
    margin: 0;
}
 
.tools > header p:nth-of-type(1) {
    font-weight: 600;
    text-transform: uppercase;
}
 
.tools .tool {
    position: relative;
    text-align: center;
    padding-top: 3.57em;
    padding-bottom: 5.35em;
    background-repeat: no-repeat;
    background-position: left bottom;
    min-height: 340px;
   /*  -webkit-transition: box-shadow .2s;
   -o-transition: box-shadow .2s;
   transition: box-shadow .2s; */
}
 
/* .tools .tool:hover {
    -webkit-box-shadow: 0px -1px 5px rgba(0,0,0,.2);
    box-shadow: 0px -1px 5px rgba(0,0,0,.2);
} */
 
.tools .tool a {
    color: #555555;
} 
 
.tools .tool:nth-child(even) {
    /* Permalink - use to edit and share this gradient: <a href="http://colorzilla.com/gradient-editor/#f7f7f7+0,f0f0f1+100" rel="nofollow">http://colorzilla.com/gradient-editor/#f7f7f7+0,f0f0f1+100</a> */
    background-color: #f7f7f7; /* Old browsers */
    background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f0f0f1 100%); /* FF3.6-15 */
    background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f0f0f1 100%); /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to bottom,  #f7f7f7 0%,#f0f0f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f0f0f1',GradientType=0 ); /* IE6-9 */
 
}
 
.tools .tool:after {
    position: absolute;
    content: '';
    height: 177px;
    width: 1px;
    left: 0;
    bottom: -5px;
    background-image: url(../img/res/tools-line.png);
 
}
 
.tool >* {
    margin: 0;
}
 
.tool h3 {
    font-size: 1.78em;
    margin-top: 1em;
    margin-bottom: 0.8em;
    color: #1b1464;
    font-weight: 300;
    text-transform: uppercase;
}
 
.tool .tool-icon {
    display: inline-block;
    height: 60px;
    width: 65px;
    background: transparent url(../img/res/tools-spirite.png) 0 0 no-repeat;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s;
}
 
.tool a:hover .tool-icon {
    -ms-background-position-y: -60px;
    background-position-y: -60px;
}
 
.tool-icon.calculator {
    background-position: -65px 0;
}
 
.tool-icon.visa-free {
    background-position: -130px 0;
}
 
.tool-icon.assessment {
    background-position: -195px 0;
}
 
@media (min-width: 1900px){
    .tools {
       /* Permalink - use to edit and share this gradient: <a href="http://colorzilla.com/gradient-editor/#b4b7c9+0,ccd0dc+4,eaecf0+9,f7f7f7+50,eaecf0+90,ccd0dc+95,b4b7c9+100" rel="nofollow">http://colorzilla.com/gradient-editor/#b4b7c9+0,ccd0dc+4,eaecf0+9,f7f7f7+50,eaecf0+90,ccd0dc+95,b4b7c9+100</a> */
       background: #b4b7c9; /* Old browsers */
       background: -moz-linear-gradient(left,  #b4b7c9 0%, #ccd0dc 4%, #eaecf0 9%, #f7f7f7 50%, #eaecf0 90%, #ccd0dc 95%, #b4b7c9 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(left,  #b4b7c9 0%,#ccd0dc 4%,#eaecf0 9%,#f7f7f7 50%,#eaecf0 90%,#ccd0dc 95%,#b4b7c9 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(to right,  #b4b7c9 0%,#ccd0dc 4%,#eaecf0 9%,#f7f7f7 50%,#eaecf0 90%,#ccd0dc 95%,#b4b7c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4b7c9', endColorstr='#b4b7c9',GradientType=1 ); /* IE6-9 */
    }
}
 
/* end tools section here */
 
 
/* about code */
 
.about-us {
    padding: 0;
}
 
.about-us {
    background: #fff;
    padding: 0;
    background-image: url(../img/bg/about-flag-bg.jpg), url(../img/bg/about-corporate-bg.jpg);
    background-repeat: no-repeat;
    background-position: left center, right center;
    -webkit-background-size: 50% auto;
    background-size: 50% auto;
}
 
.about-us .about-content {
    background: #fff;
    padding: 5em;
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    font-style: normal;
}
 
.about-us h2 {
    text-transform: uppercase;
    color: #a29992;
    line-height: inherit;
    font-size: 2.36em;
}
 
.about-us h2 em {
    display: block;
    font-style: normal;
    color: #1b1464;
    font-size: 0.76em;
}
 
.about-us .about-content {
    font-style: normal;
}
 
.about-us .about-content .highlight {
    font-size: 1.79em;
    color: #1b1464;
    font-weight: 300;
    margin: 1.4em 0;
}
 
.about-us .about-content p:not(.highlight) {
    /* eye candy */
    line-height: 1.79;
}
 
 
/* end of about */
 
 
/* testimonial code */
 
.client-testimonials {
    position: relative;
}
 
.client-testimonials h2 {
    text-transform: uppercase;
    font-size: 1.78em;
}
 
.client-testimonials {
    background-color: #fff;
    background-image: url(../img/bg/pen-bg.jpg), url(../img/bg/passport-bg.jpg);
    background-position: right 0, left 100%;
    background-repeat: no-repeat;
}
 
.client-testimonials > header {
    text-align: center;
}
 
.client-testimonials .testimonial {
    text-align: center;
    /*background: #eee;*/
    padding: 0 4em;
    margin: 1em auto;
    max-width: 800px;
}
 
.testimonial blockquote {
    font-size: 1.78em;
    color: #898989;
    /*padding: .5em 0;	*/
    background-image: url(../img/res/open-quote.png), url(../img/res/close-quote.png);
    background-position: 0 0, 80% 100%;
    background-repeat: no-repeat;
    margin: 0;
}
 
.testimonial-details {
    margin-top: 2.5em;
    font-style: normal;
}
 
.testimonial-details > p > span {
    display: block;
}
 
.testimonial-details > p > span:nth-of-type(1) {
    font-size: 1.07em;
}
 
.testimonial-details cite {
    color: #1b1464;
    font-style: normal;
}
 
.client-testimonials .testimonial {
    display: none;
}
 
.client-testimonials .testimonial.active {
    display: block;
}
 
.testimonial-navigation {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    /*bottom: 5em;*/
}
 
.testimonial-navigation:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 8%;
    background: #eee;
    height: 1px;
    right: 5%
}
 
.nav-dots {
    float: left;
}
 
.nav-arrows {
    float: right;
}
 
.nav-dots li,
.nav-arrows li {
    display: inline-block;
}
 
.nav-dots li a {
    height: 18px;
    width: 18px;
    display: inline-block;
    background: url(../img/res/nav-dots.png) 0 0 no-repeat;
}
 
.nav-dots li.active a {
    background-position: -18px 0;
}
 
.nav-arrows li a {
    color: #fff;
}
 
.nav-arrows li {
    background: #b0a8a2;
    border-radius: 50px;
    height: 18px;
    width: 18px;
    text-align: center;
    line-height: 18px;
}
 
@media (min-width:768px) and (max-width:1920px) {
    .client-testimonials {
        background-position: 140% 0, -300px 100%;
    }
}
 
@media (max-width:768px) {
    .client-testimonials {
        background-image: none;
    }
}
 
 
/* end of testimonial code */
 
 
/* footer code */
 
.footer {
    position: relative;
    padding: 3.57em 0 0 0;
    background: #9b8b7c;
    color: #fff;
    background-image: url(../img/bg/footer-bg.jpg), url(../img/bg/footer-top-bottom-bg.jpg), url(../img/bg/footer-top-bottom-bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom, center 0, left 100%;
}
 
 
@media (min-width:1900px) {
 
    .footer {    
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }
}
 
.footer h4 {
    text-transform: capitalize;
    margin: 0.88em 0;
    font-size: 1.1em;
    font-weight: 600;
    white-space: nowrap;
}
 
footer a {
    color: #fff;
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
}
 
footer a:hover  , footer a:focus {
    color: #eee;
}
 
footer ul.site-links li {
    margin-bottom: 0.71em;
    line-height: 1;
}
 
footer .copyright {
    margin-top: 5em;
    position: relative;
    bottom: 20px;
    font-size: .9em;
}
 
.footer .social-links li {
    display: inline-block;
    margin-right: 5px;
    opacity: .7;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
}
 
.footer .social-links li:hover {
    opacity: 1;
}
 
@media (max-width:992px) {
 
   .footer {
        text-align: center;
        background: #9b8b7c;
        background-image: none;
   } 
 
 
   .footer [class*="col-md"] {
         margin: 3em 0;
   }
 
}
 
 
/* end footer code */

is there any obvious problem in the way i code the CSS ? is my style of coding css suseptible to breaking ? do i need to use more strict selectors and nesting ?

You can be quite liberal with your suggestions , This issue is really really concerning me.

Thank you.
Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not good

Bad things (in no particular order):

  • As a practical matter, you should seldom, if ever, need more than two or three stylesheets; generally one for the screen and one for print.
  • Media queries do not belong mixed in with the base rule sets. They set the rules that overrule the normal values based on (usually) the display size and belong at the end of the file.
  • If you have multiple style sheets, the order they're loaded matters.
  • If you have selectors that address, even through a different route, the same element with the same specificity, the last in order overrides the earlier rule set if there's any conflict.

There are likely other issues, but those popped out at me.

It appears to me you misunderstand the meaning of contextual styling. It is about the structural context of the html and not the styling contexts. Do not group your style rules by e.g. font stuff, colors, layout, &c.. In that way lies painful butts as the big toothed gotchas take out chunks.

If you like, I can discuss what I mean by that; let me know.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks for the suggestions , heres a bit more specific detail ..

Thanks alot for the pointers gary , below is what my style sheets imported look like:

        <link rel="stylesheet" href="css/animations.css">
        <link rel="stylesheet" href="css/global.css">
        <link rel="stylesheet" href="css/page-specific-stylesheet.css">

The animations i always keep it separate as they thend to run into 100's of lines , a single animation goes for about 25 - 30 lines (prefixes !! etc) , so animations have to be separate .

global.css , this is the stylesheet that is very important and helps reduce all the bloat , only styles that will be used and reused on more than one page and also the base styles go here , the style sheet i posted above is a global.css.

and lastly the page specific style sheet.

now of course the problem is that when these styles are combined namely the global.css and the styles of all the indivisual pages , they clash. I think this is a problem with the way i code rather than the way i have organized the stylesheets.

It appears to me you misunderstand the meaning of contextual styling. It is about the structural context of the html and not the
styling contexts. Do not group your style rules by e.g. font stuff, colors, layout, &c..
In that way lies painful butts as the big toothed gotchas take out chunks.

I don't organize my style sheets with that level of specificity Laughing out loud


If you have selectors that address, even through a different route, the same element with the same specificity, the last in order overrides the earlier rule set if there's any conflict.
There are likely other issues, but those popped out at me.

I believe this problem should never come up if you use unique class names and be a bit more specific with you selectors.
eg. instead of naming a class "advantages" , think of what advantage it would be and then name the class , may be "duel- citizenship-advantages" weird class name , but this is one suggestion i came up with , since i noticed that i was using alot of generic class names , no harm in using a generic class name if it is a global style or rule , but if its a rule that goes for a specific element, name it for what it is meant to be. (this was one idea i came up with.).


Media queries do not belong mixed in with the base rule sets. They set the rules that overrule the normal values based on (usually) the display size and belong at the end of the file.
If you have multiple style sheets, the order they're loaded matters.

Ummmmm .... your right and most people but the media queries right at the bottom , now when you looked at my style sheet you must have seen that the media queries are all at random places , but if you look at it closely , its not really random. What i was once told was that whenever you code a stylesheet always code it in a way that a person reading it would't have to "jump from one end of the stylesheet to another" . so basically what i do is the below:

/* home section */
 
.home {
   background: #fff;
   height: 500px;
}
 
.home .banener {
	/*other styles to prittyfy my banner*/
}
 
@media (max-width:992px) {
	/* Now see how my media queries for this section is at the bottom of the section code , 
	which i think serves the same purpose as being at the bottom of the stylesheet and 
	somehow i find this method to be very intuitive and easy to debug , i don't have to "jump"
	to the bottom of the stylesheet and at the same time i know that no code in the generic home 
	section styles if overriding my media query styles since my media queries 
	are still at the bottom of the section.  */
	.home {
		height: 300px;
	}
}
 
/* footer section */
 
.footer {
   background: #fff;
   height: 500px;
}
 
.footer .banener {
	/*other styles to prittyfy my banner*/
}
 
@media (max-width:992px) {
	/* Now see how my media queries for this section is at the bottom of the section code , 
	which i think serves the same purpose as being at the bottom of the stylesheet and 
	somehow i find this method to be very intuitive and easy to debug , i don't have to "jump"
	to the bottom of the stylesheet and at the same time i know that no code in the generic footer 
	section styles if overriding my media query styles since my media queries 
	are still at the bottom of the section.  */
	.footer {
		height: 300px;
	}
}
 
/* end footer section */

I am not sure how good the above convention is , i just discovered it myself and find it rather intuitive to put it that way. (check my comment in the code Wink ). Tell me what you think about it .

If you have multiple style sheets, the order they're loaded matters.

I absolutely take meticulous care of this and this has never been an issue with me Laughing out loud

And lastly , i would love if you could discuss and tell me what more suggestions you'd have , as i'am sure you;d know more about this then me Laughing out loud

Cheers gary and thanks alot for your suggestions.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

waiting for more tips.

Whenever your free , it would be great if we could discuss more about this Tongue i mean about "how to code CSS style sheets in a way that they don't clash" or even from a more broder perspective "how to write better CSS" Smile

I'd like to hear take on this.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Time

Let me get my methods and reasons organized on paper. There's a potload of stuff I do so automagically that without taking some time to put the thoughts together, I'll leave a bunch of holes in my explanation; not that there won't be holes anyway. Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

sure

sure gary take your time Laughing out loud i just taught i'd give u a reminder.

Thanks alot

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 39 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Still waiting to hear from you gary :D

Still waiting to hear from you gary Laughing out loud .. maybe you can make a blog post about this Laughing out loud