Articles Tagged syntax

Maintaining a large-scale CSS project is hard. Over the years, we’ve witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals:

1. Efficiency: we want to reduce the time spent thinking about how things should be done and increase the time doing things.
2. Consistency: we want to make sure all developers are on the same page.

For the past year and a half, I’ve been … Read article “Building a Scalable CSS Architecture With BEM and Utility Classes”

Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made. It is exciting for some but frustrating for others, and the reasons for both are difficult to explain.

A web page is traditionally made up of three separate parts with separate responsibilities: HTML code defines the structure and meaning of the content on a page, CSS code defines its appearance, … Read article “Why JavaScript is Eating HTML”

You know the single-value syntax: .thing { display: block; }. The value “block” being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better served by a two-value system that can apply that same concept more broadly and just as intuitively.… Read article “Two-Value Display Syntax (and Sometimes Three)”

There is a variety of HTML that you can just leave out of the source HTML and it’s still valid markup.

Doesn’t this look weird?

<p>Paragraph one.
</p><p>Paragraph two.
</p><p>Paragraph three.</p>

It does to me, but the closing tags are optional. The browser will detect it needs them and manifest correctly in the DOM anyway. … Read article “Some HTML is “Optional””

This week, Chris Ferdinandi examined a clever JavaScript snippet, one that’s written creatively with new syntax features, but is perhaps less readable and performant. It’s a quick read, but his callout of our industry’s fixation on cleverness is worth… calling out:

…we’ve become obsessed as an industry with brevity and clever code, and it results in code that’s sometimes less performant, and typically harder to read and make sense of for most people.

He made a similar argument late … Read article “Clever code”

CSS is easy, some might argue, but that “easiness” can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell.

If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now!… Read article “Combining the Powers of SEM and BIO for Improving CSS”

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work.… Read article “CSS Basics: The Syntax That Matters & The Syntax That Doesn’t”

I was trying to think of the name of a thing in the CSS vernacular the other day. It made me think we should have some kind of reference right here on CSS-Tricks, as a site with CSS in the title probably ought to have! So, here’s the basics.… Read article “CSS Ruleset Terminology”