Gathering of Tweakers

BtM909

BtM909 — Thu, 07 Jun 2012 13:24:54 GMT

418O2 schreef op donderdag 07 juni 2012 @ 15:09:
JS is wel goed om te optimizen, voor CSS geloof ik daar niet zo in.

CSS optimaliseren is hier in de context van LESS / SASS (en daar is wel eea aan te optimaliseren)...

418O2

418O2 — Thu, 07 Jun 2012 13:09:40 GMT

OkkE schreef op donderdag 07 juni 2012 @ 14:48:
[...]

Zeker, er zitten voordelen aan; ik gebruik zelf ook LESS.

Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven. Je schrijft een mixin (1 regel) of je nest wat, maar je uiteindelijke CSS wordt 4x zo groot...

Less kan zelf minimizen, dat scheelt dan weer wel.

JS is wel goed om te optimizen, voor CSS geloof ik daar niet zo in.

OkkE

OkkE — Thu, 07 Jun 2012 12:59:48 GMT

BtM909 schreef op donderdag 07 juni 2012 @ 14:51:
En mijn punt is dat dat te optimaliseren valt (vandaag al door jou of een ander )

Kan denk ik geen kwaad mensen af en toe te wijzen op de in-efficientie van zulke processors.

Ik denk alleen omdat de browsers daar weinig tot geen last van hebben, dat het daarom maar geen hoge prio heeft

Browsers lijken er vrij weinig problemen mee te hebben, klopt. Maar neemt natuurlijk niet weg dat je je CSS nog steeds zo efficient mogelijk wil bouwen. Bijkomend voordeel: zo min mogelijk nesten en zo min mogelijk CSS dubbel schrijven is (vind ik) nog een stuk makkelijker te onderhouden en debuggen ook.

Overigens geef ik ook direct toe dat ik misschien wat te veel met dit onderwerp bezig ben, omdat mijn vorige werkgever(s) heel front-end als niet belangrijk zag(en); PHP telde alleen

BtM909

BtM909 — Thu, 07 Jun 2012 12:51:01 GMT

OkkE schreef op donderdag 07 juni 2012 @ 14:48:
Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven.

En mijn punt is dat dat te optimaliseren valt (vandaag al door jou of een ander )

Ik denk alleen omdat de browsers daar weinig tot geen last van hebben, dat het daarom maar geen hoge prio heeft

OkkE

OkkE — Thu, 07 Jun 2012 12:48:20 GMT

BtM909 schreef op donderdag 07 juni 2012 @ 14:43:
[...]

Dat heb ik niet gezegd, gebruik het zelf ook niet.

Er zitten wel degelijk voordelen aan dit soort tools (waar CSS van kan leren voor toekomstige versies)... Aan de andere kant is de vertaalslag naar iets optimaals iets totaal anders dan de tooling en / of techniek. De vertaalslag naar efficiëntere of betere / mooie CSS is iets wat niet af doet van de functionaliteit wat ze met LESS / SASS willen bereiken

Zeker, er zitten voordelen aan; ik gebruik zelf ook LESS.

Wat mij opvalt, en waar ik dus in dit topic voor wilde waarschuwen, is dat LESS/SASS/etc het veel makkelijker (of minder duidelijk) maken heel in-efficiente CSS te schrijven. Je schrijft een mixin (1 regel) of je nest wat, maar je uiteindelijke CSS wordt 4x zo groot...

418O2

418O2 — Thu, 07 Jun 2012 12:46:02 GMT

ik heb nog nooit gezien dat "slechte"/"Dirty" css een pagina vertraagde. Ik ga zelf dus voor leesbaarheid en onderhoudbaarheid boven snelheid.

Nu maakt less ook lelijke css (als je nest), maar als ik zelf CSS dan schrijf ik ook meer uit dan strikt noodzakelijk.

BtM909

BtM909 — Thu, 07 Jun 2012 12:43:04 GMT

OkkE schreef op donderdag 07 juni 2012 @ 14:38:
[...]
Misschien vind jij dat geen probleem, maar ik heb het liever niet in de CSS.

Dat heb ik niet gezegd, gebruik het zelf ook niet.

Er zitten wel degelijk voordelen aan dit soort tools (waar CSS van kan leren voor toekomstige versies)... Aan de andere kant is de vertaalslag naar iets optimaals iets totaal anders dan de tooling en / of techniek. De vertaalslag naar efficiëntere of betere / mooie CSS is iets wat niet af doet van de functionaliteit wat ze met LESS / SASS willen bereiken

OkkE

OkkE — Thu, 07 Jun 2012 12:38:46 GMT

BtM909 schreef op donderdag 07 juni 2012 @ 14:20:
[...]

LESS and SASS zijn gemaakt voor de devver, niet voor de bezoeker (en de browser komt er heus wel uit met z'n RTL parser)

Het was een tip die ik wilde mee geven in dit topic voor mensen die net met LESS / SASS / etc beginnen. Het is een prima tool, maar het kan geen kwaad om te weten dat de uiteindelijke CSS soms minder optimaal is.

Als je niet oppast kan je zonder het echt door te hebben vrij snel dingen als dit krijgen:

Cascading Stylesheet:

1 2	/* Code can CSS kleurtjes aan :*/ .foo .bar .foobar .lorem .ipsem ul li p { ... }

Cascading Stylesheet:

.foo { /* 10 regels CSS */ }
...
.bar { /* zelfde 10 regels nogmaals */ }
...
.foobar { /* weer de zelfde */ }

Misschien vind jij dat geen probleem, maar ik heb het liever niet in de CSS.

BtM909

BtM909 — Thu, 07 Jun 2012 12:20:49 GMT

Pas wel op met LESS (en andere processors); het lijkt binnen LESS allemaal heel netjes, terwijl wanneer je de uiteindelijke CSS bekijkt, er soms toch soms heel veel onnodige en/of dubbele css-rules in staan...

LESS and SASS zijn gemaakt voor de devver, niet voor de bezoeker (en de browser komt er heus wel uit met z'n RTL parser)

OkkE

OkkE — Thu, 07 Jun 2012 11:56:50 GMT

crisp schreef op donderdag 07 juni 2012 @ 13:20:
[...]

Als je geen IE6 hoeft te ondersteunen zou ik dat pseudo gewoon weglaten:
Cascading Stylesheet:
1
2
3
.nav {}
.nav.main { }
.nav.associates {}
HTML:
1
<ul class="nav main">

Het is eigenlijk vrijwel het zelfde; ofwel, het kan beide door elkaar gebruikt. Waarom ik zelf over het algemeen R4gnax zijn manier gebruik, is omdat ".nav-main" mij direct vertelt dat het om navigatie gaat, terwijl ".main" dat niet perse doet. Maar dit is denk ik meer een kwestie van voorkeur/afspraak.

Barryvdh schreef op donderdag 07 juni 2012 @ 13:17:
(Al gebruik ik tegenwoordig meestal LESS, dus dan kan je nesten en is iig je code een stuk overzichtelijker in dit soort gevallen)

Pas wel op met LESS (en andere processors); het lijkt binnen LESS allemaal heel netjes, terwijl wanneer je de uiteindelijke CSS bekijkt, er soms toch soms heel veel onnodige en/of dubbele css-rules in staan...

crisp

crisp — Thu, 07 Jun 2012 11:20:09 GMT

R4gnax schreef op donderdag 07 juni 2012 @ 13:00:
[...]

En daarom dus de OOCSS aanpak met pseudo-inheritance.
[...]

Als je geen IE6 hoeft te ondersteunen zou ik dat pseudo gewoon weglaten:

Cascading Stylesheet:

1
2
3

.nav {}
.nav.main { }
.nav.associates {}

HTML:

1	<ul class="nav main">

Barryvdh

Barryvdh — Thu, 07 Jun 2012 11:17:58 GMT

Klopt, maar het ging er dus met alleen (html5) elementen minder makkelijk ging, zonder alsnog classes aan te gaan geven.
Kan me ook wel vinden in het minder cascaden van alles, en wat meer classes aangeven, voor het doel, zoals Mark Otto beschrijft; http://www.markdotto.com/2012/03/02/stop-the-cascade/
(Al gebruik ik tegenwoordig meestal LESS, dus dan kan je nesten en is iig je code een stuk overzichtelijker in dit soort gevallen)

R4gnax

R4gnax — Thu, 07 Jun 2012 11:00:12 GMT

Barryvdh schreef op donderdag 07 juni 2012 @ 12:48:
Ja, maar dat gaat dus wel alleen als je maar 1 nav element hebt, of je moet weer dingen als header > nav gaan doen. (Kan ook prima natuurlijk, maar dan moet je weer opletten dat je niet per ongeluk iets teveel styled of verplaatst)

En daarom dus de OOCSS aanpak met pseudo-inheritance.

Cascading Stylesheet:

1
2
3

.nav {}
.nav-main { }
.nav-associates {}

HTML:

1	<ul class="nav nav-main">

Barryvdh

Barryvdh — Thu, 07 Jun 2012 10:48:24 GMT

Ja, maar dat gaat dus wel alleen als je maar 1 nav element hebt, of je moet weer dingen als header > nav gaan doen. (Kan ook prima natuurlijk, maar dan moet je weer opletten dat je niet per ongeluk iets teveel styled of verplaatst)

BtM909

BtM909 — Thu, 07 Jun 2012 10:04:34 GMT

Of gewoon HTML5 en dan de structuur stylen

Barryvdh

Barryvdh — Thu, 07 Jun 2012 08:59:41 GMT

Ik vind er ook wel iets voor te zeggen om je CSS niet alleen maar te cascaden en per id te doen, maar om juist 'standaard' css structuren te maken, en duidelijker in de markup aan te geven wat je functie is.
Dus gewoon de ul onder #topmenu de class .nav (bijvoorbeeld)
Dan krijg je alleen .nav a / .nav a.active / .nav a:hover etc

BtM909

BtM909 — Wed, 06 Jun 2012 21:47:43 GMT

Wiethoofd schreef op dinsdag 05 juni 2012 @ 13:04:
En zolang je consequent die class als "ID" behandelt is er niets aan de hand en heb je geen ranzige oplossingen zoals extra id's of !importants nodig.

Klopt er is niks aan de hand, maar dan kan je net zo goed alles weer met divjes en spacers gaan verHTMLen

oud, maar nog steeds true: http://www.rikkertkoppes.com/thoughts/2004/11/19/

Wiethoofd

Wiethoofd — Tue, 05 Jun 2012 11:04:51 GMT

Als je last hebt van een ID die te zwaar weegt, maak er dan gewoon een class van, dan kan je em later veel makkelijker door een iets specifiekere regel toch stijlen hoe jij wilt.

En zolang je consequent die class als "ID" behandelt is er niets aan de hand en heb je geen ranzige oplossingen zoals extra id's of !importants nodig.

Misschien even leuk om te lezen: CSS Wizardry - When using IDs can be a pain in the class…

R4gnax

R4gnax — Fri, 01 Jun 2012 16:10:02 GMT

OkkE schreef op vrijdag 01 juni 2012 @ 15:48:
[...]

Het kan .active zijn, maar de TS heeft daar een andere classname (topmenu-active) voor gebruikt.

Verder heb je de volgende pseudo-selectors:

1. :link = De default styling van een link (wordt vrijwel altijd weggelaten).
2. :hover = De onMouseOver styling van een link.
3. :active = De onMouseDown styling van een link.
4. :visited = Een link die ooit bezocht is (hoewel je daar weinig style aan kan hangen).

Over het algemeen, is mijn ervaring, wordt vooral 1 + 2 gebruikt. Verder niet.

Je vergeet :focus. Het keyboard equivalent van :hover.

OkkE

OkkE — Fri, 01 Jun 2012 13:48:25 GMT

bartbh schreef op vrijdag 01 juni 2012 @ 15:23:
Het is a.active en geen a:active.

Met a.active selecteer je een achor met een class "active". Met a:active en achor met de state "active".

toevoeging:

De active state is als de link/knop ingedrukt is, dus niet de actieve pagina.

Het kan .active zijn, maar de TS heeft daar een andere classname (topmenu-active) voor gebruikt.

Verder heb je de volgende pseudo-selectors:

1. :link = De default styling van een link (wordt vrijwel altijd weggelaten).
2. :hover = De onMouseOver styling van een link.
3. :active = De onMouseDown styling van een link.
4. :visited = Een link die ooit bezocht is (hoewel je daar weinig style aan kan hangen).

Over het algemeen, is mijn ervaring, wordt vooral 1 + 2 gebruikt. Verder niet.

R4gnax schreef op vrijdag 01 juni 2012 @ 18:10:
[...]

Je vergeet :focus. Het keyboard equivalent van :hover.

Inderdaad, oeps! Het was ook voor mij vrijdag middag.

bartbh

bartbh — Fri, 01 Jun 2012 13:23:31 GMT

Het is a.active en geen a:active.

Met a.active selecteer je een achor met een class "active". Met a:active en achor met de state "active".

toevoeging:

De active state is als de link/knop ingedrukt is, dus niet de actieve pagina.

OkkE

OkkE — Fri, 01 Jun 2012 13:10:32 GMT

Nog wat interessant leesvoer: Keep your CSS selectors short

Saven

Saven — Fri, 01 Jun 2012 13:02:35 GMT

Inderdaad ik merkte het. Bedankt voor je link. Oplossing van FrameWork. werkt goed Thanks!

truegrit

truegrit — Fri, 01 Jun 2012 13:01:45 GMT

Je css selector voor de class is niet specifiek genoeg. Een class gaat nooit boven een ID uit, ongeacht de volgorde in het bestand.

Lees dit voor meer informatie: http://css-tricks.com/specifics-on-css-specificity/

Daanoz

Daanoz — Fri, 01 Jun 2012 12:57:26 GMT

Probeer eens:

#topmenu ul li a.topmenu-active

of (voor dezelfde stijl als de hover)

#topmenu ul li a:hover, #topmenu ul li a:active, #topmenu ul li a.topmenu-active

FrameWork.

FrameWork. — Fri, 01 Jun 2012 12:57:13 GMT

Dit bedoel/wil je?

Saven

Saven — Fri, 01 Jun 2012 12:53:00 GMT

Hello,
Beetje vage titel maar kan het niet echt beter verwoorden.

Ben bezig met een menuutje voor een website. Hiervoor gebruik ik een list, en met css zorg ik dat die wordt vormgegeven.

Nu is het zo dat ik een menuknop ook als 'active' wil kunnen weergeven: de pagina waar de gebruiker op zit, daarvan moet de menuknop een ander kleurtje krijgen.

Nu dacht ik makkelijk te zijn door een class mee te geven, maar het lijkt er op dat die class wordt genegeerd, want er verandert niks. Heb al !important proberen mee te geven in de class maar dat lukte niet.

Mijn html:

HTML:

            <div id="topmenu">
                <ul>
                    <li><a href="#" class="topmenu-active">Beginpaginaa>li>
                    <li><a href="#">Beginpaginaa>li>
                    <li><a href="#">Beginpaginaa>li>
                    <li><a href="#">Beginpaginaa>li>
                    <li><a href="#">Beginpaginaa>li>
                    <li><a href="#">Beginpaginaa>li>
                ul>
            div>

Mijn css

Cascading Stylesheet:

#topmenu ul
{
    list-style-type: none;
    margin: 0px;
    margin-left: 10px;
    padding: 0px;
}

#topmenu ul li
{
    color: #fff;
    float: left;
    font-size: 14px;
    margin-right: 20px;
    margin-top: 15px;
}

#topmenu ul li a:link, #topmenu ul li a:visited
{
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    
    background: #5c5c5c; /* Old browsers */
    background: -moz-linear-gradient(top,  #5c5c5c 0%, #262626 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(100%,#262626)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* IE10+ */
    background: linear-gradient(top,  #5c5c5c 0%,#262626 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#262626',GradientType=0 ); /* IE6-9 */

    
    padding: 6px 9px 6px 9px;
}

#topmenu ul li a:hover, #topmenu ul li a:active
{
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    
    background: #34a6fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #34a6fd 0%, #2271ad 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34a6fd), color-stop(100%,#2271ad)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* IE10+ */
    background: linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6fd', endColorstr='#2271ad',GradientType=0 ); /* IE6-9 */
    
    padding: 6px 9px 6px 9px;
}

.topmenu-active
{
    background: #34a6fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #34a6fd 0%, #2271ad 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34a6fd), color-stop(100%,#2271ad)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* IE10+ */
    background: linear-gradient(top,  #34a6fd 0%,#2271ad 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6fd', endColorstr='#2271ad',GradientType=0 ); /* IE6-9 */
}

Ik wil dus met de class .topmenu-active de achtergrondkleur laten veranderen van #topmenu ul li a:link, #topmenu ul li a:visited

Zoals ik al aangaf werkt !important achter de background's zetten in de .topmenu-active helaas niet.
Iemand anders een idee?