Virusscanner tips?
Volgorde in CSS
Op het moment dat we iets programmeren, dan zit daar een bepaalde volgorde op basis van logica in.
Doe dit, check dat, zo ja dan dit, zo nee dan dat.
Overerving voor het gemak even buiten beschouwing latend, speelt bij CSS de volgorde geen belang. Zo kan ik bijvoorbeeld a { color: blue; } helemaal aan het begin van een CSS-bestand zetten, maar ook net zo goed aan het eind.
Ik ben benieuwd of jullie een bepaalde volgorde hanteren. Stel we willen van een pagina (even heel grof) de header, de content en de footer vormgeven. Zet je dan bijvoorbeeld alles wat in de header staat bij elkaar, vervolgens alles wat met content te maken heeft en als laatste alles wat met de footer te maken heeft? En stel je hebt een class .my_box en een class .your_box, zet je dan bijv. .my_box boven .your_box omdat het dan op alfabetische volgorde staat ... of ... let je gewoon totaal nergens op en knal je gewoon alles onder elkaar in willekeurige volgorde net hoe het uitkomt?
Ik ben benieuwd ...
Ozzie PHP op 07/03/2018 21:54:52:
speelt bij CSS de volgorde geen belang.
Volgens mij was dit wel van belang, een bron moet ik je nog even schuldig blijven maar het staat mij bij dat de volgorde wel degelijk uitmaakt.
EDIT: volgorde maakt in zekere zin zeker uit. Je zou dus altijd kunnen beginnen met (het includen van) een stylesheet voor een "blanco" stijl die altijd geldt, als een soort van basis voor de rest (default.css / style.css / reset.css etc.).
Gewijzigd op 07/03/2018 23:06:06 door Thomas van den Heuvel
Ja de volgorde is van belang wat betreft overerving ... maar dat wil ik in deze discussie dus even buiten beschouwing laten. Vandaar dat ik al schreef "Overerving voor het gemak even buiten beschouwing latend".
Maar om op de vraag terug te komen. De properties organiseer ik alfabetisch, de selectors weer niet.
Ik sorteer in eerste instantie mijn CSS organisatorisch: voor specifieke pagina's en maintemplates heb ik aparte stylesheets (waarbij de CSS voor de specifieke pagina's vaak een uitbreiding / afwijking zijn van de CSS van de maintemplates). Bijvoorbeeld style.css voor het frontend maintemplate, admin.css voor het backend maintemplates en movies.css voor een specifieke beheerpagina voor films en series.
Ook voor grote stukken functionaliteit heb ik aparte stylesheets, zo heb ik een aparte stylesheet voor mijn website-boom-backend-pagina.
En in tweede instantie hiërarchish, waarin ik van algemene naar specifieke regels ga. Ook groepeer ik deze in blokken, eventueel voorzien van /* commentaar */.
Dit ziet er dan bijvoorbeeld als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@CHARSET "UTF-8";
table.node-tree { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
table.node-tree tr { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0 { background-color: #b0b0b0; }
table.node-tree .level-1 { background-color: #c0c0c0; }
table.node-tree .level-2 { background-color: #d0d0d0; }
table.node-tree .level-3 { background-color: #e0e0e0; }
table.node-tree .level-4 { background-color: #f0f0f0; }
table.node-tree tr td { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a { color: #000000; }
table.node-tree tr td .invisible { color: #990000; }
table.node-tree tr td .access-rights { color: #ff0000; }
/* with CSS3 you could do something like table.fixed td:nth-of-type(3) for the 3rd column */
/* @see http://stackoverflow.com/questions/4185814/fixed-table-cell-width */
table.node-tree tr td.title { width: 75%; }
/*
if you float elements in a block, and use another block element inside this block,
the latter block will fill out the remaining space automatically
@see http://stackoverflow.com/questions/8252518/how-to-fill-100-of-remaing-width
*/
table.node-tree tr td.title img { height: 25px; float: left; }
table.node-tree tr td.title a.page { display: block; height: 100%; overflow: hidden; }
table.node-tree tr td.title span { display: block; height: 100%; overflow: hidden; }
table.node-tree tr td.actions div { display: block; float: right; } /* the div holding the action items */
table.node-tree tr td.actions img.empty { width: 19px; height: 25px; margin-right: 5px; float: left; }
table.node-tree tr td.actions { width: 25%; }
table.node-tree tr td.actions a { display: block; float: left; width: 19px; height: 19px; text-align: center; background-color: #888888; border-radius: 5px; margin: 3px 5px 3px 0; line-height: 17px; text-decoration: none; color: #ffffff; }
table.node-tree tr td.actions a.up { background-image: url(/media/images/up.gif); }
table.node-tree tr td.actions a.down { background-image: url(/media/images/down.gif); }
table.node-tree tr td.actions a:hover { background-color: #ff7070; }
div.bar { float: right; }
div.bar-top { margin-bottom: 10px; }
div.bar-bottom { margin-top: 10px; }
div.bar a.action { display: block; height: 21px; line-height: 20px; border-radius: 5px; background-color: #888888; text-decoration: none; padding: 0 10px; color: #ffffff; }
div.bar a.action:hover { background-color: #ff7070; }
table.node-tree { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
table.node-tree tr { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0 { background-color: #b0b0b0; }
table.node-tree .level-1 { background-color: #c0c0c0; }
table.node-tree .level-2 { background-color: #d0d0d0; }
table.node-tree .level-3 { background-color: #e0e0e0; }
table.node-tree .level-4 { background-color: #f0f0f0; }
table.node-tree tr td { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a { color: #000000; }
table.node-tree tr td .invisible { color: #990000; }
table.node-tree tr td .access-rights { color: #ff0000; }
/* with CSS3 you could do something like table.fixed td:nth-of-type(3) for the 3rd column */
/* @see http://stackoverflow.com/questions/4185814/fixed-table-cell-width */
table.node-tree tr td.title { width: 75%; }
/*
if you float elements in a block, and use another block element inside this block,
the latter block will fill out the remaining space automatically
@see http://stackoverflow.com/questions/8252518/how-to-fill-100-of-remaing-width
*/
table.node-tree tr td.title img { height: 25px; float: left; }
table.node-tree tr td.title a.page { display: block; height: 100%; overflow: hidden; }
table.node-tree tr td.title span { display: block; height: 100%; overflow: hidden; }
table.node-tree tr td.actions div { display: block; float: right; } /* the div holding the action items */
table.node-tree tr td.actions img.empty { width: 19px; height: 25px; margin-right: 5px; float: left; }
table.node-tree tr td.actions { width: 25%; }
table.node-tree tr td.actions a { display: block; float: left; width: 19px; height: 19px; text-align: center; background-color: #888888; border-radius: 5px; margin: 3px 5px 3px 0; line-height: 17px; text-decoration: none; color: #ffffff; }
table.node-tree tr td.actions a.up { background-image: url(/media/images/up.gif); }
table.node-tree tr td.actions a.down { background-image: url(/media/images/down.gif); }
table.node-tree tr td.actions a:hover { background-color: #ff7070; }
div.bar { float: right; }
div.bar-top { margin-bottom: 10px; }
div.bar-bottom { margin-top: 10px; }
div.bar a.action { display: block; height: 21px; line-height: 20px; border-radius: 5px; background-color: #888888; text-decoration: none; padding: 0 10px; color: #ffffff; }
div.bar a.action:hover { background-color: #ff7070; }
Gewijzigd op 09/03/2018 16:15:25 door Thomas van den Heuvel
>> De properties organiseer ik alfabetisch, de selectors weer niet.
Je bedoelt met properties de properties binnen een selector denk ik? Maar hoe organiseer je je selectors dan?
@Thomas
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
table.node-tree { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
table.node-tree tr { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0 { background-color: #b0b0b0; }
table.node-tree .level-1 { background-color: #c0c0c0; }
table.node-tree .level-2 { background-color: #d0d0d0; }
table.node-tree .level-3 { background-color: #e0e0e0; }
table.node-tree .level-4 { background-color: #f0f0f0; }
table.node-tree tr td { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a { color: #000000; }
table.node-tree tr td .invisible { color: #990000; }
table.node-tree tr td .access-rights { color: #ff0000; }
table.node-tree tr { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
table.node-tree .level-0 { background-color: #b0b0b0; }
table.node-tree .level-1 { background-color: #c0c0c0; }
table.node-tree .level-2 { background-color: #d0d0d0; }
table.node-tree .level-3 { background-color: #e0e0e0; }
table.node-tree .level-4 { background-color: #f0f0f0; }
table.node-tree tr td { height: 25px; border: 0; margin: 0; padding: 0; }
table.node-tree tr td a { color: #000000; }
table.node-tree tr td .invisible { color: #990000; }
table.node-tree tr td .access-rights { color: #ff0000; }
Je begint met 'table.node-tree tr' en daaronder 'table.node-tree .level-0' en dan ga je even later weer verder met de td's via 'table.node-tree tr td'. Waarom doe je dat op die manier? En waarom staat .invisible boven .access-rights? Alfabetisch gezien zou je ze andersom verwachten. Ik bedoel dit (hoewel het wellicht zo overkomt) niet als kritiek, maar ik vraag me af waarom je die keuzes maakt, of heb je het gewoon min of meer willekeurig geplaatst?
In alle eerlijkheid, het maakt in de bovengenoemde situatie niet uit of .invisible of .access-rights als eerste komt ... maar dat houdt dan in dat je een soort van willekeur betracht (wat ik dus zelf ook wel eens doe). Ik zit me nu dus af te vragen of er niet een soort van handig 'systeem' is. Ik kan me dus voorstellen dat het handiger is om .access-rights boven .invisible te plaatsen zodat je de alfabetische volgorde aanhoudt, waardoor je iets makkelijker kunt terugvinden. Maar goed, ik heb dus zelf nog niet echt een duidelijk systeem daarin en daarom vraag ik me af of iemand anders dat wel heeft.
Code (php)
1
2
3
2
3
.block {...}
.block__element {...}
.block__element--modifier {...}
.block__element {...}
.block__element--modifier {...}
Verder zet ik block-level elementen altijd vóór inline elementen, omdat inline elementen alleen voorkomen binnen block-level elementen. Daarnaast zet ik (generieke) class selectors altijd voor (unieke) id selectors.
Daarmee krijg je dan:
• block-level elementen: body, div, p, enzovoort
• inline elementen: a, span, em, enzovoort
• class selectors: .foo
• id selectors: #bar
>> Moet natuurlijk wel een beetje praktisch blijven eh.
Hahaha ... praktisch is 'in principe' dat de a boven de i staat, zodat je op alfabetische volgorde snel iets kunt terugvinden.
@Ward
Gebruik jij zelf BEM?
En groepeer jij dan ook css? Zet je bijv. alles wat in de footer staat bij elkaar? Of zet je bijv. alles (ongeacht waar het bij hoort) op alfabetische volgorde op basis van de classnaam of ID?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.big-footer {
...
}
.big-footer__link-list {
...
}
...
}
.big-footer__link-list {
...
}
Zonder BEM-klassen zou ik echter ongeveer dezelfde groepering en volgorde aanhouden:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
footer {
...
}
footer ul {
...
}
footer ul li {
...
}
...
}
footer ul {
...
}
footer ul li {
...
}
Dus bijv. niet footer ul, maar footer__ul?
Gebruik je dan geen ID's?
Het is een aparte manier van werken maar ik krijg er een fijn gevoel bij.
Meer over BEM: https://css-tricks.com/bem-101/
Nee klopt, een ID gebruik je uitsluitend voor unieke elementen (die maar 1x voorkomen).
Een logo komt meestal maar 1x voor. Ik gebruik dan normaliter #LOGO, maar bij BEM gebruik je dan .header__logo? Klopt dat?
Ja dit klopt, in theorie zou je ook een ID kunnen gebruiken maar als je consistent wilt blijven gebruik je ook hiervoor een class, dit is tenslotte de manier hoe BEM werkt.
Maar gebruik je dan niet meer 'header ul', maar '.header__ul'? En niet 'header a' maar '.header__a'? Is dat de bedoeling?
Voor mijn nieuwe website ga ik het ook gebruiken.
Als ik Bootstrap gebruik gebruik ik meestal geen BEM, dit komt omdat de classes niet overeen komen met hoe BEM werkt, behalve als ik kan extenden via SASS/SCSS natuurlijk.
En wat jij zegt is inderdaad de bedoeling, maar .header__a klinkt een beetje abstract, persoonlijk zou ik eerder iets van '.header__logo-anchor of '.header__nav-anchor gebruiken bijvoorbeeld.
Kun je bijv. nog wel zeggen: a { tekst-decoration: none; }
Of is het dan de bedoeling dat je iedere link een class 'link' geeft en in je css .link { tekst-decoration: none; } plaatst?
Maar heeft ook te maken met persoonlijke voorkeur, zelf zou ik dan in mijn stylesheet een soort sectie genaamd "Globaal" maken en vervolgens daar de globale/universele een stijlen plaatst.
Gewijzigd op 09/03/2018 17:28:26 door Marthijn Buijs
Bedankt voor je input ... andere input is uiteraard nog steeds welkom.
theme
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- base
- base.scss
- components
- block.scss
- breadcrumb.scss
- button.scss
- form.scss
- navigation.scss
- slider.scss
- socialmedia.scss
- layout
- header.scss
- footer.scss
- sidebar.scss
- tools
- vars.scss
- mixins.scss
- main.scss (hier include ik alleen maar de losse scss bestanden)
- base.scss
- components
- block.scss
- breadcrumb.scss
- button.scss
- form.scss
- navigation.scss
- slider.scss
- socialmedia.scss
- layout
- header.scss
- footer.scss
- sidebar.scss
- tools
- vars.scss
- mixins.scss
- main.scss (hier include ik alleen maar de losse scss bestanden)
Voor het werk gebruik ik BEM, voor mijn eigen freelance projecten gebruik ik geen BEM omdat ik het niet echt een toegevoegde waarde vind (maakt de classes alleen maar langer en dus meer typen). Het hangt er vanaf hoe duidelijk je zelf de naamgeving doet en hoe je die definieert in CSS.
Toevoeging op 12/03/2018 12:38:38:
Ozzie PHP op 09/03/2018 17:04:34:
Kun je bijv. nog wel zeggen: a { tekst-decoration: none; }
Je hoeft niet alles met een class te doen, je kunt gewoon ook stijlen aan de hand van het element. Hiermee stijl je de 'default' dingen zoals een a, h1, h2, p, etc.
Toevoeging op 12/03/2018 12:43:09:
Ozzie PHP op 08/03/2018 20:27:04:
@Anoniem M
Nee klopt, een ID gebruik je uitsluitend voor unieke elementen (die maar 1x voorkomen).
Een logo komt meestal maar 1x voor. Ik gebruik dan normaliter #LOGO, maar bij BEM gebruik je dan .header__logo? Klopt dat?
Nee klopt, een ID gebruik je uitsluitend voor unieke elementen (die maar 1x voorkomen).
Een logo komt meestal maar 1x voor. Ik gebruik dan normaliter #LOGO, maar bij BEM gebruik je dan .header__logo? Klopt dat?
Zelf gebruik ik NOOIT een ID voor CSS, het is onnodig en alleen maar meer kans op problemen. Hoezo komt een logo meestal maar 1 keer voor? Logo's komen ook regelmatig voor in de footer, of als 'trust icons' of als partners etc. Daarom raad ik af om ID's te gebruiken voor CSS, voor Javascript kun je het wel gebruiken (maar ook daar gebruik ik ze zelden).
Gewijzigd op 12/03/2018 12:50:04 door Joakim Broden