ABEM. A more useful adaptation of BEM.

BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics.

The standard syntax for BEM is:

block-name__element-name--modifier-name

I’m personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of …


ABEM. A more useful adaptation of BEM. is a post from CSS-Tricks

Keeping Parent Visible While Child in :focus

Say we have a <div>.

We only want this div to be visible when it’s hovered, so:

div:hover {
opacity: 1;
}

We need focus styles as well, for accessibility, so:

div:hover,
div:focus {
opacity: 1;
}

But div’s can’t be focused on their own, so we’ll need:

<div tabindex="0">
</div>

There is content in this div. Not just text, but links as well.

<div tabindex="0">
<p>This little piggy went to market.</p>
<a href="#market">Go to market</a>
</div>

This is …


Keeping Parent Visible While Child in :focus is a post from CSS-Tricks

Creating Cue Files from Markdown

Pretty specific, huh? While we’re going to do exactly what the title says, this post is more about a learning exercise and an example of getting help on the internet.

My podcast editor, Chris Enns, is always looking for ways to improve his work and make podcasting better. One kinda cool way to do that is to offer “chapters” so that people can jump around in a podcast to specific points.

Through TimeJump, we already offer that on …


Creating Cue Files from Markdown is a post from CSS-Tricks

Accessibility Testing Tools

There is a sentiment that accessibility isn’t a checklist, meaning that if you’re really trying to make a site accessible, you don’t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said.

Karl Groves once argued against this:

I’d argue that a well-documented process which includes checklist-based evaluations are better at ensuring that all users’ …


Accessibility Testing Tools is a post from CSS-Tricks

How Would You Solve This Rendering Puzzle In React?

Welcome, React aficionados and amateurs like myself! I have a puzzle for you today.

Let’s say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each “Album” is a React component.

Scroll rendering problem

Now assume the CSS framework that you are using requires you …


How Would You Solve This Rendering Puzzle In React? is a post from CSS-Tricks

From Local Server to Live Site

(This is a sponsored post.)

With the right tools and some simple software, your WordPress development workflow can be downright delightful (instead of difficult)! That’s why we built Local by Flywheel, our free local development application.

Now, we’ve launched Local Connect, a sweet feature embedded in the app that gives you push-pull functionality with Flywheel, our WordPress hosting platform. There’s no need to mess with downloading, uploading, and exporting. Pair up these platforms to push local …


From Local Server to Live Site is a post from CSS-Tricks

How to use FTP to upload files to WordPress for Beginners

Are you looking to learn how to use FTP to upload files on your WordPress website? FTP or file transfer protocol is a fast and simple way to upload files from your computer to your website. In this article, we will show you how to… Read More »

The post How to use FTP to upload files to WordPress for Beginners appeared first on WPBeginner.

How to Use Contact Form to Grow Your Email List in WordPress

Did you know that you can use your WordPress contact form to grow your email list? Users are most engaged when they are trying to reach out using the contact form on your website. In this article, we will show you how you can use… Read More »

The post How to Use Contact Form to Grow Your Email List in WordPress appeared first on WPBeginner.

How to Export WordPress Users Data to a CSV File

Do you want to export WordPress users data to a CSV file? Sometimes you may need the user data to add into a new website or to use in other marketing campaigns. The default WordPress export tools do not let you export user accounts. In… Read More »

The post How to Export WordPress Users Data to a CSV File appeared first on WPBeginner.