Hoe doen jullie het?
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
input[type=submit]{
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #123456;
}
p.info {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #654321;
}
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #123456;
}
p.info {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #654321;
}
HTML
Code (php)
1
2
3
4
2
3
4
<p class="info">
Tekst
</p>
<input type="submit" />
Tekst
</p>
<input type="submit" />
OF
Methode 2:
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.rounded {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]{
color: #123456;
}
p.info {
color: #654321;
}
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]{
color: #123456;
}
p.info {
color: #654321;
}
HTML
Code (php)
1
2
3
4
2
3
4
<p class="info rounded">
Tekst
</p>
<input type="submit" class="rounded" />
Tekst
</p>
<input type="submit" class="rounded" />
Vanwaar deze vraag? DRY (don't repeat yourself) schoot me te binnen..
Ik hoor graag!
Gewijzigd op 05/10/2011 17:09:24 door Roy D
Gesponsorde koppelingen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.button
{
/* Style voor button */
}
.button.round
{
border-radius: 5px;
}
<a class="button">Hello World</a>
<a class="button">Another</a>
<a class="button round">Yes!</a>
<a class="button round">Goodbye</a>
{
/* Style voor button */
}
.button.round
{
border-radius: 5px;
}
<a class="button">Hello World</a>
<a class="button">Another</a>
<a class="button round">Yes!</a>
<a class="button round">Goodbye</a>
Maar stel dat het 2 totaal andere elementen zijn (zoals jij in je voorbeeld aangeeft) zou ik methode 1 gebruiken. Dit is namelijk een stuk meer semantisch.
Verder zie je dat ik alleen border-radius heb getyped. Dit doe ik altijd en op het eind gooi ik er prefixr overheen.
Code (php)
1
<input type="text" class="gradient-gray rounded shadow" />
En dit komt dan bij 5 inputs achter elkaar voor.. Is er nog een methode 3? :P Of ik "vervuil" de html of de css.. (hier bedoel ik het DRY verhaal mee)
Heb alle varianten van border-radius in me voorbeeld. Gebruik prefixr namelijk ook.. Top tooltje!
Gewijzigd op 05/10/2011 19:13:04 door Roy D
Een HTML pagina moet pure goede semantische HTML zijn en door middel van CSS moet de pagina zijn style krijgen. De HTML moet totaal geen invloed hebben op de CSS. Dat doe je door het gebruik van classes voor elke style wel.
En prefixr vind ik vooral zo handig vanwege de app, geweldig die app.
Heb eens gehoord van een javascript stukje dat je css onderhanden neemt waardoor je bijv. een soort van includes kan gebruiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
.rounded {
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]{
color: #123456;
:include:.rounded
}
p.info {
color: #654321;
:include:.rounded
}
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]{
color: #123456;
:include:.rounded
}
p.info {
color: #654321;
:include:.rounded
}
Iemand ervaring met zoiets?
Maar je kan ook LESScss (http://www.lesscss.org/) gebruiken. LESS.js is inderdaad een JavaScript file voor LESScss, maar die raad ik af omdat het te langzaam is.
Bedankt voor de reactie's!
Edit: Ben net ook een php variant tegen gekomen: http://leafo.net/lessphp/ of https://github.com/anthonyshort/Scaffold
Gaan we eens proberen, met de less js file heb je: geen js ook geen css ;)
Gewijzigd op 05/10/2011 20:43:37 door Roy D
