BEM denkwijze

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Software Developer

Maak jij de cloud oplossing van Sigmax klaar voor opschaling? Zij zoeken een Senior Software Developer Functie omschrijving Zie jij het als een uitdaging om onze cloudoplossing verder door te ontwikkelen, waarbij security, usability en het schaalbaar houden van de oplossing tot je primaire takenpakket hoort? Met andere woorden ben jij in staat om samen met het softwareteam onze cloudoplossing gereed te maken voor opschaling naar meer dan 1000 klanten, zonder dat ons softwareteam daarvoor verder hoeft uit te breiden? Als Senior Software Developer ga jij je bezighouden met ASP.NET MVC, een N-Tier architectuur, SQL Server, multi-tenant, multi-language en encryptie.

Bekijk vacature »

Senior applicatieontwikkelaar

Ben jij een gedreven applicatieontwikkelaar met minimaal drie jaar werkervaring? En wil je een uitdagende baan met impact én jezelf breed ontwikkelen? Bij UPS bouw je mee aan complexe systemen die wereldwijd worden gebruikt en krijg je alle ruimte om nóg beter te worden in je vak. Dit ga je doen In een dynamisch scrumteam werk je aan de hand van processen en technologieën zoals CI/CD en DevOps aan het behalen van jullie doelen. Je bent betrokken bij alle facetten van applicatieontwikkeling: van ontwerpen en bouwen tot testen en implementeren. Je levert ontwerpen die passen bij de onderliggende frameworks en

Bekijk vacature »

Backend .NET Developer C# Voetbal

Bedrijfsomschrijving Binnen deze organisatie in de regio Den Haag zal je als .NET Developer terecht komen in een multidisciplinair team met 5 andere Programmeurs. In jouw rol ben je verantwoordelijk voor het ontwikkelen en optimaliseren van mobiele applicaties met meer dan 4 miljoen gebruikers wereldwijd. Als Backend Developer zal je dagelijks werken met C#, .NET Core, Kubernetes en een SQL Database. Voor het onderling communiceren van de microservices wordt gebruik gemaakt van RabbitMQ. Je krijgt energie van technische uitdagingen en je werkt graag samen. Verder zul je in vele projecten deelnemen, zorg je voor nieuwe features, los je diverse bugs

Bekijk vacature »

Senior Application Developer

The world wants simple apps that can manage the movements of millions of packages daily. But behind every application is a complex string of gripping challenges, and a focused developer tackling them. As someone who’s highly familiar with C# development practices in the Netherlands, you’ll join us as a senior member of the team and manage apps for Brokerage – big business freight in global markets that cover over 76% of all international trade. Digital innovation plays a crucial role in choreographing the infinite movements of goods, funds and information. The logic that goes into it, and skills adopted because

Bekijk vacature »

Senior Java-developer Rijks ICT Gilde

Functie­omschrijving De Rijksoverheid beschikt over een enorm Java-landschap. Als senior Java-developer bij het Rijks ICT Gilde werk je dan ook aan uitdagende en veelzijdige opdrachten. Je helpt ministeries en uitvoeringsorganisaties succesvol te zijn in het continu ontwikkelen en verbeteren van technische oplossingen. Zo help je de Rijksoverheid om met lef en ondernemerschap slagvaardig te opereren. Applicaties ontwikkelen die direct bijdragen aan het functioneren van Nederland: daar zorg jij voor als senior Java-developer bij het Rijks ICT Gilde (RIG). Of het nou gaat om het fixen van een bug of het maken van een compleet nieuwe applicatie. Met jouw Java-skills draag

Bekijk vacature »

Gezocht/Looking for: Senior .NET Developer - Rotte

Due to extensive growht of our client we are currently searching for a Senior Dot.Net Software Developer. This is for one of our clients in the digital data transformation domain. Vacature Details/ Vacancy Details Contract type: Fixed term contract Start datum/ Date of Joining: immediate (work from home during Covid-19 period) Werkervaring/experience required: Minimum of 6 years experience in a similar role (must have) Understanding of Azure DevOps (must have) Experienced in Agile/Scrum software development Deep understanding of C#, .NET, .NET Core, REST, Azure services(must have) Experience with Kubernetes or Azure Service Fabric Database knowledge (a.o SQL, CosmosDB) Pluspoints would

Bekijk vacature »

Senior applicatieontwikkelaar

Ben jij een gedreven applicatieontwikkelaar met minimaal drie jaar werkervaring? En wil je een uitdagende baan met impact én jezelf breed ontwikkelen? Bij UPS bouw je mee aan complexe systemen die wereldwijd worden gebruikt en krijg je alle ruimte om nóg beter te worden in je vak. Dit ga je doen In een dynamisch scrumteam werk je aan de hand van processen en technologieën zoals CI/CD en DevOps aan het behalen van jullie doelen. Je bent betrokken bij alle facetten van applicatieontwikkeling: van ontwerpen en bouwen tot testen en implementeren. Je levert ontwerpen die passen bij de onderliggende frameworks en

Bekijk vacature »

Back-end Developer Python

BACKEND DEVELOPER PYTHON For an international client near Utrecht I'm currently looking for a Back-end Python Developer that has affinity with Data Science. Do you want to work with the most talented people and at the same time work for a company that is engaged in reducing the environmental impact? Then this could be one of the most challenging opportunities. The Responsibilities As a Back-end Developer in this company, you build something that matters in various product development projects, focusing for example on data processing, data storage, data science or platform billing. Product development projects can be executed both on-site

Bekijk vacature »

Full-stack .NET developer gezocht, Goeree-Overflak

Ben je een .NET software developer en op zoek naar een professionele werkomgeving binnen een wat groter innovatief en ambitieus bedrijf? Waar sprake is van een uitgebreid applicatielandschap met elke dag nieuwe uitdagingen, waar alles mogelijk is, binnen een goede collegiale sfeer? Lees dan verder! Voor een bedrijf in Goeree-Overflakke zijn we momenteel op zoek naar een ervaren software developer. De IT afdeling bestaat uit circa 60 mensen waarvan zo'n 15 developers. Voor de recente architectuur wordt gebruikt gemaakt van de nieuwste technieken waaronder .NET Core, Docker en Angular. Echter bestaat het applicatielandschap uit een groot aantal verschillende applicaties waarbij

Bekijk vacature »

Xamarin C# Developer

Als Xamarin C# Developer zorg je ervoor dat onze cross-platform mobiele apps onze medewerkers de best mogelijke manier geven om Coolblue te beheren. Hoe word ik een Xamarin C# Developer bij Coolblue? Je specialiteit is ofwel C# OF mobiele app code, en je geniet van het werken met Xamarin. Je vindt het leuk om samen met je collega's te programmeren, om zo een hogere kwaliteit in de codebase te garanderen. Daarnaast denk je na over technische beslissingen zoals architectuur, tools en processen. Ook houd je de performance van je app in de gaten en analyseer je samen met je team

Bekijk vacature »

Lead Drupal Ontwikkelaar / Full Digital Agency / U

Bedrijfsomschrijving Deze organisatie gelegen in het hartje van Utrecht biedt grote (inter)nationale organisaties maatwerk oplossingen op het gebied van Online Platform development, webapplicaties en Mobile Apps. Om de meest innovatieve oplossingen te bieden wordt er gewerkt met de nieuwste technieken in onder andere Drupal, Symfony en PHP. Binnen deze jonge en ambitieuze organisatie ga jij het development team aansturen en bezoek je samen met de projectmanager klanten. Jij gaat de behoeften van de klant vertalen en samen met jouw development team ontwikkelen. Jullie zijn daarnaast ook verantwoordelijk voor het doorontwikkelen en upgraden naar de nieuwste versies van Drupal. Jij draagt

Bekijk vacature »

PEGA Senior System Architect

BNP Paribas Cardif is looking for: PEGA Senior System Architect Do you have an excellent knowledge about PEGA development? Do you want to put this know-how to use and create innovative technical solutions for business & IT challenges? Would you like to work for an international Insurance Company? In that case you may be the new PEGA Senior System Architect we’re looking for! What’s the job about? You will be responsible for the development activities on our PEGA platform. You report to the Deputy Manager Software Development & Tests and you’ll collaborate closely with other internal and external developers and

Bekijk vacature »

Frontend Developer

Currently I'm looking for a frontend developer. The ideal candidate will have the following skills: A strong sense of Software Craftsmanship Read, write and think JavaScript, both ES5 and ES6 Experience with A/B Testing tools (Adobe Target, Optimizely or other) Experience with Data Analytics tools (Adobe Analytics, Google Analytics, SiteMetrics, Omniture) REST API design and usage, JSON Knowledge and understanding HTML5 and CSS (and/or SCSS), accessibility (ADA) Experience with the Angular (5 or later) framework and its features is a plus Experience with Adobe Experience Manager AEM/JAVA is a plus Ability to: Come up with, build and present ideas Transform

Bekijk vacature »

C#.NET Ontwikkelaar/consultant

Bedrijfsomschrijving Begin jaren 60' is onze klant begonnen als gespecialiseerde werkmaatschappij om invulling te geven aan de toenemende vraag naar industriële automatiseringsoplossingen. De organisatie heeft daardoor al ruim 45 jaar ervaring met optimalisatie van de processen binnen de industriële sector. De laatste jaren heeft zij zich met name gespecialiseerd in de verticale integratie van de werkvloer met de hoger gelegen management informatie systemen. De organisatie kenmerkt zich als innoverend, meedenkend en informeel. Binnen het team heerst er een positieve teamspirit met een gezonde dosis ondernemendheid en humor. Werk moet immers ook leuk zijn, toch? Functieomschrijving Ben jij een C# Developer

Bekijk vacature »

.Net Software Developer voor IT consultancy (.Net

Voor een groeiend ICT consultancy bureau in Haarlem & Leiden zijn we op zoek naar een ervaren .Net Back-end Developer. Een developer die bij klanten als het UWV, de Rabobank en Tata Steel applicaties designed, ontwikkelt en implementeert. Bijvoorbeeld een IT omgeving Cloud-ready maken, de IT security verhogen, applicaties naar .Net Core migreren en veel applicaties en functionaliteiten ontwikkelen met behulp van de nieuwste stack. Wat je gaat doen bij het MBK en multinationals: Ontwikkelen (greenfield) en onderhouden van .Net (C#) websites, applicaties en infrastructuren Cloud oplossingen bouwen Het opzetten van het technisch ontwerp en databases Een hoge diversiteit ervaren

Bekijk vacature »

Pagina: « vorige 1 2

Ozzie PHP

Ozzie PHP

10/08/2016 03:02:22
Quote Anchor link
@Wouter J:

Duidelijk verhaal ... wat ook daadwerkelijk opgaat als dingen/elementen continu zouden veranderen. Echter ... volgens mij bouwen we een website naar een vaststaande structuur en weten we dus op voorhand wat waar staat.

Wil ik een speciale lijst toevoegen dan voeg ik een lijst met class "my_special_list" toe. Waarom moet ik dan alle <li>'s die daar inzitten ook weer een aparte class geven, terwijl ik die prima kan benaderen via het root-element <ul> met de class "my_special_list"?

Komen we weer even terug op het voorbeeld met het klaslokaal. Stel we hebben 1 klaslokaal met felle groene verlichting, en 1 klaslokaal met felle rode verlichting.

Ieder kind dat het rode lokaal binnenstapt wordt door de verlichting vanzelf roodgekleurd en is dus een "rood" kind. Ieder kind dat het groene lokaal binnenstapt wordt op diezelfde manier "groen" van kleur. We weten dus dat in het rode lokaal altijd rode kinderen zitten, en in het groene lokaal altijd groene kinderen. WAAROM zouden we dan bij de kinderen in het rode lokaal nog een extra bordje om hun nek hangen om aan te geven dat ze rood zijn? Nergens voor nodig, want omdat ze in het rode lokaal zitten, weten we dat al. Idem voor het groene lokaal.

Hoe achterlijk dit voorbeeld ook is (maar goed dat was het originele voorbeeld ook) geeft het wel exact aan wat ik bedoel te zeggen. Op basis van een overkoepelend element, kun je generieke elementen binnen het overkoepelend element prima stijlen. Het lijkt mij overkill om al die generieke elementen een bordje om hun nek te hangen / een class te geven.
Gewijzigd op 10/08/2016 03:14:38 door Ozzie PHP
 
PHP hulp

PHP hulp

27/10/2020 08:17:23
 
Ward van der Put
Moderator

Ward van der Put

10/08/2016 10:43:21
Quote Anchor link
Ozzie PHP op 10/08/2016 03:02:22:
Wil ik een speciale lijst toevoegen dan voeg ik een lijst met class "my_special_list" toe. Waarom moet ik dan alle <li>'s die daar inzitten ook weer een aparte class geven, terwijl ik die prima kan benaderen via het root-element <ul> met de class "my_special_list"?

Het verschil is dat jouw versie impliciet is met een verborgen opmaak die je alleen kunt terugvinden door in de CSS-code te zoeken. Ik moet bijvoorbeeld binnen de accolades gaan kijken hoe jij een kerstboom optuigt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
ul.kerstboom {
  ...
}

ul.kerstboom li {
  ...
  ...
  /* Dit moet ik allemaal lezen om te achterhalen wat je doet en laat. */
  ...
  ...
}

Aangezien jij HTML-elementen rechtstreeks opmaakt, loop ik ook nog het risico dat je elders in de CSS-code bijvoorbeeld hebt verzonnen dat lijsten in een footer anders worden opgemaakt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
footer ul {
  ...
}

BEM maakt keuzen expliciet:
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
.kerstboom {
  ...
}

.kerstboom__kerstbal {
  ...
}

.kerstboom__piek {
  ...
}

.kerstboom__kerstbal--goudkleurig {
  ...
}

.kerstboom__kerstbal--zilverkleurig {
  ...
}

Ozzie PHP op 10/08/2016 03:02:22:
Duidelijk verhaal ... wat ook daadwerkelijk opgaat als dingen/elementen continu zouden veranderen. Echter ... volgens mij bouwen we een website naar een vaststaande structuur en weten we dus op voorhand wat waar staat.

Maar BEM is dan ook bedoeld voor templating. Kijk bijvoorbeeld maar eens naar de BEM-bouwstenen in Material Design Lite (MDL) van Google. Als een structuur op voorhand vastligt en later zelden of nooit ingrijpend verandert, is een objectgeoriënteerd, modulair template-systeem niet interessant. Áls ...
 
Ozzie PHP

Ozzie PHP

10/08/2016 12:13:23
Quote Anchor link
>> Maar BEM is dan ook bedoeld voor templating.

Dat is dus een situatie waarin het handig zou kunnen zijn.

>> Het verschil is dat jouw versie impliciet is met een verborgen opmaak die je alleen kunt terugvinden door in de CSS-code te zoeken. Ik moet bijvoorbeeld binnen de accolades gaan kijken hoe jij een kerstboom optuigt

Dat moet je in de BEM variant ook, met hooguit als verschil dat je daar direct naar het naampje kunt gaan van de class. Maar met bijv. Firebug zie je ook direct de opmaak van ieder element, dus voor mij persoonlijk is dit geen zwaarwegend argument. Ik vind het dan weer zonde van resources om generieke elementen pseudo-uniek te maken door ze hun eigen class te geven.

Maar goed, uiteindelijk is het een kwestie van wat je zelf makkelijk vindt. Ieder nadeel heb z'n voordeel ;)
 
Eddy E

Eddy E

10/08/2016 22:19:50
Quote Anchor link
Ozzie PHP op 08/08/2016 21:25:20:
Wat een vreemde manier om generieke elementen te voorzien van een class ... lijkt me overkill.


Helemaal mee eens.
Ik haak dan wel even halverwege in het topic aan, maar om elk element een class te geven, is toch niet nodig?
Je kan er toch (bijna) altijd bij zonder enige class dan ook?
Een class op <body> is geen gek idee en soms op <section> ook niet, maar dat doe je dan meestal via een id=...!

Wat is er mis met dit?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
body#contact nav ul li a:nth-child(1) { font-weight: bold; }


Toch duidelijk dat de eerste link van je menu op de contact-pagina vet wordt?

Toevoeging op 10/08/2016 22:29:58:

Als reactie op Ward z'n code van een kerstboom:
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
<div class="kerstboom">
    <div>Piek</div>
    <div class="bal zilver">Zilveren bal</div>
    <div class="bal goud">Gouden bal</div>
    <div>Voet</div>
</div>


/* Kerstboom hier */
.kerstboom             {  }

.kerstboom div:first-child     { /* piek /* }
.kerstboom div:last-child     { width: 10%; background-color: brown; }

.kerstboom .bal         { border-radius: 100%; }

.kerstboom .zilver         { background-color: grey; }
.kerstboom .goud         { background-color: yellow; }


Zo houd je sematiek hoog, weet je alsnog alles te vinden en ben je veel flexibeler. Je kan ook een gouden stam hebben... Gewoon class=goud toevoegen...
Gewijzigd op 10/08/2016 22:30:47 door Eddy E
 
Wouter J

Wouter J

10/08/2016 22:31:36
Quote Anchor link
Quote:
Toch duidelijk dat de eerste link van je menu op de contact-pagina vet wordt?

Ironisch bedoelt? Zo ja, negeer de rest van t bericht maar. :)

<nav> is niet alleen je hoofdnav. Ook die serie linkjes in je footer is een nav. Sterker nog, die "< prev | next >" linkjes bij blogposts zijn ook nav. Dus nu wordt elk eerste li'tje in een nav (iedere willekeurige nav) bold.

Ja, je zal nu wel 1 <nav> hebben. Maar over 30 dagen voeg je toch nog een sidebar met een subnavje toe en het gedoe begint. Dan moet die weer font-weight:normal; krijgen, met eventueel andere stijlen die van andere CSS selectors zijn geinherit, etc.

Tevens is de selector veel te specifiek. Niet alleen kun je op deze manier de stijl nogmaals hergebruiken, ook zal deze selector relatief traag zijn. (CSS selectors worden altijd van rechts naar links gelezen).
 
Ozzie PHP

Ozzie PHP

10/08/2016 22:44:29
Quote Anchor link
body#contact nav ul li a:nth-child(1) { font-weight: bold; }

Body met een id is niet nodig, want er staat op iedere pagina maar 1 body.

Dan hou je dus over:

#contact nav ul li a:nth-child(1) { font-weight: bold; }

Die ul en li zijn uit m'n hoofd ook niet nodig, dus blijft over:

#contact nav a:nth-child(1) { font-weight: bold; }

nth-chilc(1) kan first-child worden en dan krijg je:

#contact nav a:first-child { font-weight: bold; }

>> Tevens is de selector veel te specifiek.

Nu dus niet meer ;-)
 
Wouter J

Wouter J

10/08/2016 22:55:40
Quote Anchor link
Quote:
Nu dus niet meer ;-)

Gelukkig weten jij en ik dat "Tevens" betekend dat er voor nog veel meer geschreven staat.

Overigens werk de hele selector niet zoals verwacht (zowel specifieke als de korte, welke idd identiek zijn), maar dat mag eenieder zelf uitvinden :)
 
Ozzie PHP

Ozzie PHP

11/08/2016 00:52:59
Quote Anchor link
>> Overigens werk de hele selector niet zoals verwacht

Haha ... zou zomaar kunnen ;-) Heb 'm ook niet getest.

Anyhow ... gebruik gewoon BEM als je dat fijn vindt. Ik gebruik het niet. Stijl dingen die algemeen zijn ook als zodanig, en wat specifiek noodzakelijk is, ook als zodanig. Dat is mijn werkwijze. Scheelt in ieder geval een hoop classes ;-)
 
Eddy E

Eddy E

11/08/2016 10:03:48
Quote Anchor link
Wouter J op 10/08/2016 22:31:36:
Ironisch bedoelt? Zo ja, negeer de rest van t bericht maar. :)


Beetje wel ja ;)
Desalniettemin is het zo benaderen van elementen, (hetzij een strakke hierachie nodig is) wel mogelijk.

In tegenstelling tot BEM, vond ik vanochtend dit: http://acss.io/
Maar hetzelfde als in mij ogen: veel te veel classes en code voor iets wat veel eenvoudiger met iets geavanceerdere CSS ook gewoon mogelijk is.
 
Ward van der Put
Moderator

Ward van der Put

11/08/2016 10:26:12
Quote Anchor link
Eddy E op 11/08/2016 10:03:48:
In tegenstelling tot BEM, vond ik vanochtend dit: http://acss.io/
Maar hetzelfde als in mij ogen: veel te veel classes en code voor iets wat veel eenvoudiger met iets geavanceerdere CSS ook gewoon mogelijk is.

Er zijn inderdaad meer template-talen die er, net zoals BEM, een eigen dialect van CSS op nahouden. Naast ACSS (Atomic CSS) zijn dat bijvoorbeeld SMACSS (Scalable and Modular Architecture for CSS) en OOCSS (Object Oriented CSS).

Het draait er niet om dat ze iets zouden doen dat in CSS onmogelijk is: ze gebruiken uiteindelijk immers allemaal CSS. Ik denk dat je ze meer moet zien als tussentaal die een logischer (of beter te hanteren) verband legt tussen DOM-elementen enerzijds en CSS-eigenschappen anderzijds.

Vooral het feit dat ze objectgeoriënteerd zijn, maakt ze aantrekkelijk als je ook al objectgeoriënteerd PHP gebruikt. Een BEM-block kun je zien als één klasse. Vergelijkbaar met methoden en properties in een PHP-klasse kan één zo'n CSS-klasse meerdere DOM-elementen en meerdere CSS-eigenschappen omvatten.
Gewijzigd op 11/08/2016 10:28:39 door Ward van der Put
 

Pagina: « vorige 1 2



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.