After recently seeing a few BEM class naming issues on a project I was working on, I looked for an online site that would check a CSS stylesheet for BEM naming issues.
I couldn’t find one… and what with being on lockdown here in England and having a fair amount of free time on my hands, I thought I’d write one!
BEM (Block, Element, Modifier) is a methodology for naming CSS styles in a modular and maintainable manner. If you’ve worked on large websites, I’m sure you’ll have come across indecipherable class names and felt the pain of changing a style in one place and that breaking the styling elsewhere on something that seemingly isn’t related. These are issues that BEM will help you to avoid.
In this article, we’re going to use the example of a product card to explain BEM.
BEM relies solely on CSS class names to apply styles to HTML so there are no HTML tag or ID selectors. BEM class names can consist of 3 parts [block]__[element]--[modifier].
Over the years, I’ve worked on many large web app projects with developers of varying levels of experience and often see the same web accessibility issues crop up. In this article, I detail the 5 most common web accessibility issues I’ve come across and offer solutions for them.
Are you making / have you made these mistakes in your projects?
1) Using An Input Without An Associated Label
Wrong - Using plain text next to the input
The text “Username” is not associated with the <input> so when a screen reader announces the <input>, it won’t announce that it’s for entering a username. The <input> will be announced along the lines of “input, edit text” so a screen reader user would have no idea what this <input> is for or what to enter.
The text “Username” also won’t act as a click / touch target to set focus to the <input>.
Knockout is a minimalist, mature and proven library for creating web applications.
It isn’t as feature rich as some of the more modern libraries & frameworks but it does what it does well, primarily being binding HTML elements against a data model.
Even in 2019, I believe Knockout has its place and is still used on some very large projects, including Microsoft’s Azure Portal.
If you have an existing project that uses Knockout, you can move over to TypeScript now and start enjoying these benefits.
This article will start with covering using TypeScript and Knockout’s type definitions to create view models, components and bindings that are strongly typed.
If you have a large project, it may not be feasible to move to TypeScript all in one go.
Gradually migrating provides more flexibility and allows you to, for example, use TypeScript just for new code or “upgrade” modules when there are changes to existing code.
TypeScript provides some huge benefits like types support, better IDE tooling and additional constructs like interfaces and enums so why not start making use of these now.