BEM denkwijze

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mobile App Developer

Ons Mobile ontwikkelteam zoekt een fanatieke Mobile App Developer. Ben jij creatief en heb je passie voor het ontwikkelen van apps? Dan zijn wij op zoek naar jou! Jouw baan ChipSoft heeft al diverse apps uitgebracht en het aantal gebruikers hiervan neemt snel toe. De apps doen het erg goed bij de zorginstellingen. Je kunt hierbij denken aan apps verpleegkundigen, thuiszorgmedewerkers, de logistieke dienst en - natuurlijk - de artsen zelf. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘back end’ (HiX, onze ICT-totaaloplossing voor de zorg).

Bekijk vacature »

.NET C# developer, .NET CORE, Typescript, React, K

Voor een ambitieuze en snelgroeiende organisatie de regio Rotterdam zijn we momenteel op zoek naar een .NET C# developer. De organisatie bestaat inmiddels ruim 15 jaar en heeft een systeem ontwikkeld waarmee bedrijven de informatie van grote en complexe projecten beter kunnen managen. Dit systeem is geheel webbased. Om hun globale ambities waar te maken zijn ze recentelijk begonnen het systeem geheel te herbouwen met de nieuwste technieken. Denk hierbij aan technieken als .NET CORE, Typescript, React, Kubernetes en Azure. Niet alleen betekent voldoende nieuwe technische uitdaging maar ook betekent dit dat je voor 80 tot 90% van je tijd

Bekijk vacature »

Senior Java developer / Online data organisatie

Functieomschrijving Werk jij als Java Developer al jaren in een Agile team en wil jij data gedreven werken? Wil je daarnaast je development skills gebruiken bij een bedrijf dat online data genereert? Lees dan snel verder! Back-end dataprocessing applicaties bouwen; Koppelingen met REST API’s maken; Productiewaardig implementeren van machine learning algoritmen; Hoogwaardige codes schrijven. Functie-eisen Minstens 3 jaar ervaring; Affiniteit met het werken met data; Met Scrum en Agile wijze werken; Gebruikerservaring met producten uit de Atlassian suite (JIRA, Confluence, Git); Ervaring met Git, JUnit en Maven; Kennis en/of ervaring met Data tooling waaronder Hadoop is een grote pré; Goede

Bekijk vacature »

.Net custom software developer

Jouw uitdaging als .Net developer Als .Net custom software developer creëer je maatwerkoplossingen. Denk aan een mobiele applicatie voor het stroomlijnen van logistieke processen, een platform voor een uitkeringsorganisatie of de passagiersbeleving van een vliegtuigmaatschappij. Hierbij gaat het vaak om complexe omgevingen met veel gebruikers, waarbij de lat dus hoog ligt. Wat jouw werkzaamheden zoal zijn? Je werkt mee aan het gehele ontwikkelproces, van ontwerp, design en ontwikkeling tot testen en beheren van Microsoft applicaties en PoC’s. Je gaat werken met o.a. de volgende technologie: Azure, C#, .Net core, Angular, React, Vue en soms AWS. Je neemt deel aan meetings

Bekijk vacature »

Senior iOS Developer vacature

Je bent innovatief. Je bent creatief. Jij gaat voor een topbaan. Mobile apps ontwerpen, uitwerken en realiseren, dat is jouw passie! Met grote toewijding richt jij je dan ook op een app waarmee consumenten met een gezichtsscan betalen. Of je stort je je op een app die de temperatuur in huis op afstand kan regelen. Het spreekt voor zich dat jouw apps top of the bill zijn als het gaat om gebruiksvriendelijkheid en veiligheid. Ze hebben impact. Je voelt je als een vis in het water in een iOS-omgeving maar, veelzijdig als je bent, kun je ook met andere platforms

Bekijk vacature »

Senior C#.Net / Ontwikkelaar / Developer / Softwar

Functieomschrijving C#.Net / Ontwikkelaar / Developer / Software Engineer Ontwerpen van nieuwe applicaties; Herschrijven van bestaande applicaties; Meedraaien in uitdagende projecten; Code reviewen; Communiceren met de business. Functie-eisen Afgeronde HBO opleiding richting Informatica of vergelijkbaar; Minimaal 8 jaar ervaring als Fullstack Software Engineer; Ervaring met C#.Net en SQL server zijn een eis; Je hebt ervaring met het werken in een Scrum / Agile omgeving; Ervaring in het coachen van collega's; Heb je al kennis van Micrsoft Azure, dan is dit een belangrijke pré; Kennis van ASP .NET, MVC, Rest, Xamarin, XML/JSON en HTML5/CSS3 zijn mooi meegenomen. Bedrijfsomschrijving Deze organisatie is

Bekijk vacature »

Fullstack PHP developer voor gerenommeerde organis

Functieomschrijving Voor de functie is het belangrijk dat jij goede kennis hebt van PHP en Laravel/Symfony en JavaScript. Ze zoeken dus iemand die al 5 jaar werkervaring heeft als developer. Je zult hier zowel op de Front- als Backend werkzaam zijn en samen met je collega's ben je verantwoordelijk voor de software. Wil jij jezelf verder uitdagen in een klein en sterk team? Dan ligt hier de kans om deze stap te zetten! Functie-eisen - Je hebt minimaal 5 jaar werkervaring als PHP developer; - Javascript, PHP en MySQL kennen geen geheimen voor jou; - Je hebt kennis van meerdere

Bekijk vacature »

Front-end Developer Angular 8 Leaseauto

Functieomschrijving Ben jij een Front-end Developer en heeft Angular geen geheimen meer voor jou? Wil jij graag werken met de nieuwste versie Angular 8? Wil jij werken in een dynamisch team bij een snelgroeiend internationaal bedrijf? Lees dan snel verder! Het ontwikkelen van nieuwe front-end applicaties of verbeteren van de bestaande middels Javascript, HTML, CSS en Angular; Het bijdragen in de migratie naar Angular 8. Het leveren van jouw bijdrage aan de vertaalslag van functionele wensen naar de technische oplossing; Het op de hoogte blijven van de nieuwste ontwikkelingen binnen jouw vakgebied; Je voelt je thuis in een internationale omgeving

Bekijk vacature »

Cloud Software Developer

Als Cloud Software Developer ga je aan de slag met onze SaaS-dienst Zorgplatform. Voor de ontwikkeling hiervan gebruiken wij Microsoft technologie. Zie jij dit als een uitdaging? Lees dan verder! Jouw baan Als Cloud Software Developer ga je werken aan ons Zorgplatform. Dit is een veilige service die uitgebreide ondersteuning biedt voor transmurale samenwerking. Wij ontwikkelen dit in C# in een ASP.NET Core framework. Je gaat aan de slag met het opzetten van microservices voor de verschillende processen die Zorgplatform ondersteunt. Je maakt bijvoorbeeld de integratie voor het inkijken van het medisch dossier mogelijk aan de hand van toelatingen, geregistreerd

Bekijk vacature »

Outsystems Developer/ C#/ .Net/ Oracle Database

Functieomschrijving Wil je werken bij een marktleider op gebied van transactieverwerking? Wil je werken aan het bouwen van een nieuw platform (greenfield) in Outsystems? Wil je jezelf blijven ontwikkelen en gebruik maken van legio opleidingsmogelijkheden? Dan is dit de ideale functie voor jou. Reageer snel! Ontwikkelen en bouwen van een nieuw Outsystems platform (greenfield); Bouwen van apps, portalen, webapplicaties, API's en businessapplicaties; Plegen van overleg met de business aangaande de diensten en producten; Achterhalen van requirements bij de business. Functie-eisen HBO werk en denkniveau; Minimaal 2 jaar ervaring met Outsystems; Kennis van en ervaring met .Net, JSON, HTML; Kennis van

Bekijk vacature »

Technical Support

Technical Support Location Ridderkerk (Zuid Holland) We are looking for a Technical support for Desktop 3D printing and Industrial Additive Manufacturing devices. You will troubleshoot our 3D printers at remotely and perform repairs on site, beside this you are also a competent and reliable partner for our customers when you provide system introduction and customer basic trainings. Along with your communicative personality, which enables you to deal with our customers in a confident manner, you have a proactive and structured approach and the ability to keep a cool head even in critical phases. Main Tasks Maintenance and repair of printers

Bekijk vacature »

.NET Developer PACS / Multimedia

Wil jij met jouw ontwikkelskills medisch specialisten het optimale uit beeldmateriaal laten halen? Dan is dit jouw droombaan! Ter versterking van ons PACS-team in Amsterdam zoeken wij een ontwikkelaar die verantwoordelijkheid krijgt over zijn ‘eigen’ software. Jouw baan In deze functie ga je medische apparatuur (ECG\echo\OCT\MRI\Etc) integreren in ons EPD. Jij houdt je daarnaast bezig met het maken van software om de verschillende output-formaten van de apparatuur te ondersteunen en te presenteren aan medische specialisten. Tevens ben je verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van je eigen PACS-tools (Picture Archiving and Communication System). Die tools integreer je feilloos

Bekijk vacature »

Oracle SOA-OSB Developer

Jouw uitdaging als Oracle SOA-OSB Developer Integratie is het hart in alle projecten. Zowel on-premise als in de Cloud of met hybride oplossingen kom je Oracle SOA Suite en de Oracle Service Bus bij vele klanten tegen. Jij ben als SOA-OSB ontwikkelaar onderdeel van dat integratie hart en zorg je dat binnen Oracle en niet-Oracle implementaties dat integraties zo efficiënt en onderhoudbaar mogelijk worden gerealiseerd. Je werkt op een prettige manier samen in teams met ervaren professionals van Capgemini middel SCRUM/Agile. Met jouw specialistische integratie kennis voeg je concrete waarde toe door je hands-on ervaring. Met jouw overzicht en sterke

Bekijk vacature »

Junior GIS Specialist

Als Junior GIS Specialist leer je bij ons welke rol geografische informatie in organisaties kan spelen. In de functie zul je in aanraking komen met één of meerdere onderwerpen: GIS, FME, Aardobservatie, Burgerparticipatie en Geo Data Science. In de werkzaamheden zul je werken met GIS, maar ook geo-informatie verwerken in FME- of Python-scripts. Wij zoeken een persoon die graag initiatief neemt en houdt van samenwerken, maar het ook niet erg vindt om zelfstandig te werken. Twee dagen in de week werk je in Rotterdam. Andere dagen werk je in overleg thuis of op een andere werkplek. Minimale vereisten HBO+ Niveau

Bekijk vacature »

Fullstack Developer/ ASP.NET (Core) / Cloud develo

Functieomschrijving Ben jij een full stack developer die graag aan de slag gaat met cloud development en Continious delivery? Bouw jij graag mee aan informatiediensten en verscheidene platformen? Lees dan snel verder! Bouwen van nieuwe functionaliteiten (10%) Doorontwikkeling van één van de complexe applicaties (30%) Bugfixing (30%) Testen van (jouw) code (30%) Functie-eisen Minimaal een MBO-diploma met HBO werk- en denk niveau; Minimaal 2 a jaar ervaring als .NET developer; Ervaring C#, ASP.NET Core; Ervaring met het Entityframework, Visual Studio; Ervaring binnen een SCRUM/Agile omgeving; Ervaring met Azure (DevOps) is een pré; Ervaring met MVC is een pré. Bedrijfsomschrijving Deze

Bekijk vacature »

Pagina: 1 2 volgende »

Lord Gaga

Lord Gaga

08/08/2016 18:25:58
Quote Anchor link
Hallo,

Op het internet zie ik vaak voorbeelden van BEM die als volgt zijn opgebouwd:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.list {}
.list__item {}
.list__item--selected {}


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<ul class="list">
    <li class="list__item list__item--selected">Item 1</li>
    <li class="list__item">Item 2</li>
</ul>


Nu snap ik de logica, want het ziet er logisch uit en het voorbeeld is redelijk simpel. Maar houdt dit in dat je CSS enkel nog *mag* toepassen op BEM classes en niet op elementen? Wat zou bijvoorbeeld een logische opbouw zijn in de volgende situatie:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<nav>
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/contact">Contact</a>
        </li>
    </ul>
</nav>


Want het onderstaande lijkt me nogal vergezocht:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<nav class="navigation">
    <ul class="navigation-list">
        <li class="navigation-list__item navigation-list__item--selected">
            <a href="/" class="navigation-list-item__anchor">Home</a>
        </li>
        <li class="navigation-list__item">
            <a href="/contact" class="navigation-list-item__anchor">Contact</a>
        </li>
    </ul>
</nav>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.navigation {}
.navigation-list {}
.navigation-list__item {}
.navigation-list__item--selected {}
.navigation-list-item__anchor {}


Wat is jullie kijk hier op?

Alvast bedankt!
Gewijzigd op 08/08/2016 18:43:52 door Lord Gaga
 
PHP hulp

PHP hulp

26/01/2020 18:02:16
 
Ward van der Put
Moderator

Ward van der Put

08/08/2016 18:32:51
Quote Anchor link
>> Maar houdt dit in dat je CSS enkel nog *mag* toepassen op BEM classes en niet op elementen?

Ja.

Ik had aanvankelijk precies dezelfde bedenkingen bij BEM: waarom zou je zo veel "classitis" toevoegen met een class .navigation-list__item als je al een element li hebt. Dat is echter nou juist precies de gedachtegang achter BEM: je moet iets ook kunnen stylen als een list-item wanneer het géén li is.
Gewijzigd op 08/08/2016 18:33:24 door Ward van der Put
 
- Ariën -
Beheerder

- Ariën -

08/08/2016 18:41:35
Quote Anchor link
- Ariën -:
Zou je de titel van dit topic kunnen aanpassen naar iets wat je vraag- / problemmstelling weergeeft?
Alvast bedankt!
Gewijzigd op 08/08/2016 18:41:54 door - Ariën -
 
Lord Gaga

Lord Gaga

08/08/2016 18:43:34
Quote Anchor link
Oke, dan had ik dat in ieder geval juist, maar wat doe ik dan in het volgende geval:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<section class="panel">
    <h1>Sign up</h1>
    <p>Enter your details below.</p>
    
    <form method="post" accept-charset="UTF-8">
        <fieldset>
            <legend>Information</legend>
            
            <label for="username">Username</label>
            <input type="text" name="username" id="username" />
            
            <label for="password">Password</label>
            <input type="password" name="password" id="password" />
            
            <label for="password_confirm">Password (confirm)</label>
            <input type="password" name="password_confirm" id="password_confirm" />
        </fieldset>
        
        <fieldset>
            <legend>Submit</legend>
            
            <input value="Sign up" type="submit" name="sign-up" />
        </fieldset>
    </form>
</section>


De enige BEM class in bovenstaande code is "panel". Zou ik "panel", "form" en "fieldset" als 3 aparte blocks moeten zien?
 
Ward van der Put
Moderator

Ward van der Put

08/08/2016 19:35:31
Quote Anchor link
Lord Gaga op 08/08/2016 18:43:34:
De enige BEM class in bovenstaande code is "panel". Zou ik "panel", "form" en "fieldset" als 3 aparte blocks moeten zien?

Nee, dan is <section class="panel"> je Block, dus de B van BEM.
Alle afhankelijke Elements daaronder of daarbinnen zijn dan de E van BEM.
 
Lord Gaga

Lord Gaga

08/08/2016 21:11:13
Quote Anchor link
Ah, oke, dankjewel!

Dan is er nog 1 ding dat ik niet helemaal snap.

https://codepen.io/anon/pen/RRqjgq

In bovenstaand voorbeeld staan een anchor en een button die allebei een button voor moeten stellen. Het anchor ziet er goed uit, maar de button niet. Als je hier CSS aantoevoegt speciaal om die button er uit te laten zien als het anchor, heeft het anchor toch juist onnodige CSS. Of zie ik dit verkeerd?
 
Ozzie PHP

Ozzie PHP

08/08/2016 21:25:20
Quote Anchor link
Wat een vreemde manier om generieke elementen te voorzien van een class ... lijkt me overkill.
 
Lord Gaga

Lord Gaga

08/08/2016 21:29:29
Quote Anchor link
Dat dacht ik ook, maar toch lijkt BEM me een heel gestructureerde manier om te werken. :P
 
Ozzie PHP

Ozzie PHP

08/08/2016 21:36:45
Quote Anchor link
Dat kan, maar het lijkt me ook een hoop overkill. Als voorbeeld een list is een container-element. Alles wat daar in zit kun je prima uniek stijlen aan de hand van een class of id op die list.

Stel dat je een lijst hebt met 50 items, dan zit je dus al 50x onnodig een <li> een class te geven. Lijkt me niet zinvol, nog even ongeacht van de data die je daarmee extra moet oversturen.
 
Ward van der Put
Moderator

Ward van der Put

09/08/2016 07:50:03
Quote Anchor link
Veel code is niet altijd overkill. Dat is zoiets als zeggen dat Van Gogh overdreven veel verf gebruikte. Het maakt BEM juist een enorm expressieve taal voor front-end development.

Als je bijvoorbeeld deze hiërarchie hebt van blokken en elementen, zijn er (a) afhankelijkheden met (b) impliciete en verborgen opmaak, die in een verborgen volgorde wordt bepaald door overerving van eigenschappen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <body>
    <main>
      <div>
        <form>
          <p>
            <label>
              <input ...>
            </label>
          <p>
        </form>
      </div>
    </main>
  </body>
</html>

BEM (Block-Element-Modifier) doet in hoofdlijnen twee dingen: (a) de afhankelijkheden enorm reduceren en (b) de opmaak expliciet maken, door die uit te drukken in de naamgeving van klassen. BEM beperkt de hiërarchie tot een blok (de B van BEM) dat één of meer elementen (de E van BEM) kan bevatten. Je hoeft, in pseudo-code, overal en altijd alleen nog maar met deze structuur rekening te houden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<block>
  <element>
    ...
  </element>
</block>

Het maakt daardoor bijvoorbeeld niet meer uit of een lijstitem <li> nu in een <ol>, <ul>, <nav> of <menu> staat. En het maakt niet meer uit of die lijst vervolgens in een <header>, een <footer>, een <aside> of een <whatever> staat.

Op blokken elementen kun je modifiers (de M van BEM) toepassen, die hun opmaak of 'rol' veranderen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<block>
  <element class="foo-modifier bar-modifier">
    ...
  </element>
</block>

In het eerste geval moet je eindeloos zoeken in HTML en CSS waar een bepaalde opmaak vandaan komt. En wijzig je de opmaak van één ding voor één pagina, dan kan de hiërarchie van gestapelde afhankelijkheden leiden tot onverwachte en ongewenste wijzigingen in andere pagina's die hetzelfde stylesheet gebruiken. Door de hiërarchie van afhankelijkheden kun je bovendien moeilijk elementen verplaatsen. Bij BEM heb je daarvan geen last. Iedereen die de syntaxis van BEM begrijpt, doorziet in HTML-code én in CSS-code wat er overal gebeurt.

Voor wie meer over BEM van wil weten, zijn deze artikelen aan te bevelen:

Connie Chan - Keeping the Front-End Modular with BEM
CSS-Tricks - BEM 101
Smashing Magazine - A New Front-End Methodology: BEM
MindBEMding – getting your head ’round BEM syntax

Toen ik voor het eerst in BEM werkte, had ik vergelijkbare bezwaren als Ozzie. Ik vond BEM overdreven uitgebreid. En ik vond BEM een overbodig dialect, want we hebben immers al gewoon HTML5 en CSS3.

Achteraf, nu ik meer gewend ben aan BEM, komen die bezwaren me echter heel bekend voor: ze zijn vergelijkbaar met de complicaties waar je tegenaan loopt als je van procedureel PHP overstapt naar OOP! BEM maakt de opmaak op vergelijkbare wijze modulair en objectgeoriënteerd.
Gewijzigd op 09/08/2016 07:53:04 door Ward van der Put
 
Thomas van den Heuvel

Thomas van den Heuvel

09/08/2016 11:44:44
Quote Anchor link
Maar hoe is dit anders dan een extreme vorm van een set elementen voorzien van een wrapper div?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div class="my-custom-form-style">
    <form class="form">
        ... doe je ding ...
    </form>
</div>

In .my-custom-form-style kun je alle afwijkingen ten opzichte van .form definiëren.

Negeert BEM de C in CSS niet nogal?
 
Ward van der Put
Moderator

Ward van der Put

09/08/2016 13:51:30
Quote Anchor link
Dat is inderdaad bijna hetzelfde, alleen zou je het in BEM eerder zo doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div class="foo">
  <form class="foo__bar">
    ...
  </form>
</div>


In de BEM-syntaxis is foo een block en foo__bar (met dubbele underscore) een bar-element van een foo. Daarmee heb je gelijk al meer duidelijkheid. Je ziet dat je foo__bar alleen binnen een foo kunt gebruiken — aan foo__bar zelf al, zonder hogerop te moeten zoeken. Dat geldt ook voor je CSS-bestand: daarin bepalen alleen .foo en .foo__bar de opmaak, niet een div of form, niet een div .my-custom-form-style en al helemaal niet een div .my-custom-form-style form. BEM negeert de cascade niet, maar maakt die explicieter.

Bovendien is niet gezegd dat foo een div moet zijn en foo__bar een form: je kunt meer objectgeoriënteerd ook andere elementen dezelfde 'functies', 'rollen' of 'taken' in je lay-out toebedelen. Om bij het eerdere voorbeeld van Ozzie te blijven: in een uitgebreidere lijst zou een <p> de BEM-rol van list-item op zich kunnen nemen, dat hoeft niet beperkt te blijven tot een <li>.

Derde voordeel is nog dat de blokken en elementen niet beperkt blijven tot de elementen van HTML. In BEM kun je bijvoorbeeld wat gemakkelijker uit de voeten met modulaire objecten zoals een .avatar of een .icon zonder die gelijk met een img.avatar of img.icon volledig afhankelijk te maken van een <img>.

(Ik zal overigens de laatste zijn die alleen de voordelen van BEM ziet, want ik heb me 2 weken lang in allerlei bochten moeten wringen om meer dan 100 K aan MDL-BEM in minder dan 50 K CSS voor een AMP-project te proppen.)
Gewijzigd op 09/08/2016 13:53:07 door Ward van der Put
 
Ozzie PHP

Ozzie PHP

09/08/2016 16:20:23
Quote Anchor link
>> Maar hoe is dit anders dan een extreme vorm van een set elementen voorzien van een wrapper div?

Dat is dus inderdaad ook precies mijn bezwaar.

Waarom zou je het zo doen (geen idee of dit correct BEM is maar het gaat om het idee):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="my_ul">
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
  <li class="my_ul my_li">bla bla</li>
<\ul>

.my_ul my_li { color: red; }

Als je ook gewoon dit kunt doen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="my_ul">
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
<\ul>

.my_ul li { color: red; }

Wat is het verschil? Behalve dat die laatste variant overzichtelijker is en minder data behelst?
Gewijzigd op 09/08/2016 16:20:57 door Ozzie PHP
 
Ward van der Put
Moderator

Ward van der Put

09/08/2016 17:04:52
Quote Anchor link
>> Wat is het verschil?

Volgens mij had ik dat net uitgelegd, maar kennelijk had ik dat niet goed gedaan.

In jouw voorbeeld is er altijd een sterke afhankelijkheid tussen een ul.my_ul en een <ul class="my_ul"><li>. In BEM wordt die afhankelijkheid losgelaten. Dat betekent — bijvoorbeeld — dat ik langere lijsten ook zou kunnen stylen met een <p> in een <aside> zonder de regels voor de opmaak te breken, zolang je maar het juiste block en element noemt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<aside class="my_ul">
  <p class="my_ul__list-item">bla bla</li>
  <p class="my_ul__list-item">bla bla</li>
  <div class="my_ul__list-item--unavailable">bla bla</li>
</aside>


Ik denk, overigens, dat je de voordelen pas ziet als je de syntaxis doorziet én BEM eens live in actie hebt gezien. Anders blijft het bij een theoretische Spielerei met hypothetische use cases.
Gewijzigd op 09/08/2016 17:05:53 door Ward van der Put
 
Ozzie PHP

Ozzie PHP

09/08/2016 17:46:31
Quote Anchor link
>> Volgens mij had ik dat net uitgelegd, maar kennelijk had ik dat niet goed gedaan.

Of ik had niet goed opgelet ;-)

>> Dat betekent — bijvoorbeeld — dat ik langere lijsten ook zou kunnen stylen met een <p> in een <aside>

Ja ... ware het niet dat je het dan symantisch verprutst. Je gaat nu een lijst 'namaken' door <p>'s onder elkaar te zetten. Iets wat je in de praktijk normaliter niet zult doen.

Besides that ... ook dit kun je weer keurig in je css oplossen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
.my_ul li, .my_ul p { color: red; }

Voilà, nu hebben we dezelfde opmaak voor echte list-items, en voor paragrafen ... En bovendien is dit nog netter omdat we de paragrafen niet als list-items betitelen.

Ander voorbeeldje dan nog:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="red_list">
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
  <li class="red_list red_li">bla bla</li>
<\ul>

.red_list red_li { color: red; }


versus ...

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="red_list">
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
  <li>bla bla</li>
<\ul>

.red_list li { color: red; }


Wat nu als ik mijn red_list wil vervangen door een blue_list?? In de laatste variant is dat simpel:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<ul class="blue_list">

In de BEM methode moet ik echter iedere <li> ook nog gaan wijzigen. Lijkt me niet efficiënt.

Ik WIL de voordelen van BEM wel zien, maar ik zie ze in de praktijk nog niet.
 
Ramon van Dongen

Ramon van Dongen

09/08/2016 18:11:08
Quote Anchor link
Quote:
Ja ... ware het niet dat je het dan symantisch verprutst.
Precies wat ik ook denk.
Een <table> is voor een tabel, een <li> is voor een lijst. Om straks met een <p> ook een lijst te kunnen maken, klinkt heel raar.
 
Ward van der Put
Moderator

Ward van der Put

09/08/2016 21:46:16
Quote Anchor link
Laten we wel wezen: een ul.red_list definiëren voor een <ul class="red_list"> is sowieso al geen fris gebruik van klassen. In dat opzicht verschilt CSS eigenlijk nauwelijks van OOP PHP. En dat al helemaal niet als je dit doet omdat je dit "gemakkelijk" kunt vervangen door een ul.blue_list en een <ul class="blue_list">.

Met BEM heeft dat weinig van doen, want dit is ordinair slecht klassen toepassen — ongeacht welke taal en ongeacht welke methodologie je daarvoor gebruikt.

BEM is meer bedoeld om rollen en de logica van een gebruikersinterface uit te drukken.

Een menu is bijvoorbeeld een block (de B van BEM):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
.menu { ... }


En dat menu kan opdrachten bevatten als elementen (de E van BEM):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.menu { ... }

.menu__command { ... }


Die elementen (E) binnen een bepaald block (B) kunnen tot slot worden gewijzigd met een modifier (de M van BEM). Een menuopdracht kan bijvoorbeeld uitgeschakeld worden getoond:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
.menu { ... }

.menu__command { ... }

.menu__command--disabled { ... }


Dit kun je inderdaad ook allemaal doen met CSS alleen, maar het grote verschil is dat ik hier een klein template heb geschreven dat in een groot project met meerdere developers kan worden hergebruikt door iedereen die BEM kan lezen. Is de CSS op orde, dan maakt het zelfs niet meer uit op welke HTML-elementen ze de B, de E of de M toepassen: het werkt altijd voorspelbaar en zoals verwacht.
Gewijzigd op 09/08/2016 21:49:13 door Ward van der Put
 
Ozzie PHP

Ozzie PHP

09/08/2016 22:39:33
Quote Anchor link
Dus het is vooral omdat het in jouw eigen toepassing handig is. Dat kan uiteraard.

Echter, op het moment dat je op een <p> een class "my_li" gaat toepassen, dan denk ik wel dat je vanuit symantisch oogpunt iets niet goed doet.

Maar goed, voor sommigen geeft BEM misschien een soort van controle. Ik vind het prima als je het gebruikt, maar ik denk zeker niet dat het beter is dan normale css.
 
Wouter J

Wouter J

10/08/2016 01:31:43
Quote Anchor link
Quote:
Maar goed, voor sommigen geeft BEM misschien een soort van controle. Ik vind het prima als je het gebruikt, maar ik denk zeker niet dat het beter is dan normale css.

Het heeft mij in elk geval veel geholpen. Het stijlen van classes ipv tags is een hele handige stap om te maken. Of je dat nou als menu__item of .menu-item doet maakt hierin eigenlijk weinig uit, dat is slechts naamgeving. (het BEM principe helpt wel bij het definieren en hergebruiken van stijlen)

Ik weet nog hoe ik vroeger op mn blog altijd liep aan te modderen met mn post stijlen, omdat alles weer stijlen cascade van de hoofd site (bijv. een headline, linkje, etc.). Door alle hoofdstijlen met classes te definieren en niet met tags, en alleen de post stijlen (paragraphs, etc.) met tags te definieren ben je van al deze problemen af.

Overigens wat interessante linkjes:

* * http://csswizardry.com/2012/10/a-classless-class-on-using-more-classes-in-your-html/
* https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
* http://csswizardry.com/2012/11/code-smells-in-css/
* http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ (bijna alle CSS wizardry artikelen zijn de moeite van het lezen waard overigens)
 
Ozzie PHP

Ozzie PHP

10/08/2016 01:34:50
Quote Anchor link
>> Het stijlen van classes ipv tags is een hele handige stap om te maken.

Maar mijn vraag is nog steeds het waarom? Waarom zou je 100 <li>'tjes allemaal een class geven, terwijl je ze prima kunt benaderen via 1 class op de overkoepelende <ul>? Het komt op mij over als onnodig extra werk.
 
Wouter J

Wouter J

10/08/2016 02:20:06
Quote Anchor link
>> Maar mijn vraag is nog steeds het waarom? Waarom zou je 100 <li>'tjes allemaal een class geven, terwijl je ze prima kunt benaderen via 1 class op de overkoepelende <ul>? Het komt op mij over als onnodig extra werk.

100 li'tjes?! o.O Ik zal maar gewoon mijn eerste linkje quoten:

Quote:
Imagine a classroom full of children with no names. In order to organise and refer to them the teacher has a system; the guy two rows from the back, the kid next to the girl next to the kid under the light, the girl near the window, the first guy sat in the carpeted area…

Her seating plan reads like a board game. As soon as the guy next to the window swaps places with the girl next to the radiator then she has to remember that it’s now the guy near the window, and that the girl near the guy near the window is now near the girl near the window.

As soon as anything moves or changes she has to do a lot of rethinking and making sure things still check out. If the guy near the door is now the guy under the AC unit then is that definitely the right girl next to the guy who used to be the girl under the AC unit? Who knows?

When things aren’t explicitly named—and we try and rely on coincidental and circumstantial situations to try and refer to and target them—we find ourselves in a real mess where things quickly become invalid or break/fail. Things are hard to manipulate and work with. We have to try and remember the dependencies our references have on our structure. Things are basically unstable and chaotic.
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.