/    Sign up×
Community /Pin to ProfileBookmark

Styling HTML with PHP

Copy linkTweet thisAlerts:
Jan 27.2017

Hello.

I’ve been working on the way I generate HTML with PHP, and to facilitate and normalize just that I’ve made a simple HTML_Element class, which represents a tag along with it’s contents, attributes and so on. In the future, I want to be able to have individual modules which I can use anywhere without them interfering with each other, and right now the only obstacle to that, really, is CSS since it can never be scoped and I always have to keep in mind every single name in the CSS namespace so certain rules don’t “bleed” to where they shouldn’t. As mostly a C++ programmer, I’m not used to dealing with scoping and naming issues, as well as separating such interconnected layout aspects as HTML and CSS are, and though I understand why CSS is the way it is, it is by far the thing that bothers me the most in web development.

My ideal use case would be something along the lines of:

[code=php]$css_rules = new CSS_Rules;
//Configure $css_rules with all the relevant css rules…
$html_element = new HTML_Element(“p”);
//Configure the element, add children, etc….
$html_element.set_style($css_rules);[/code]

This would basically mean I wouldn’t need to worry about class names at all, and would just need to use that variable containing all the relevant rules whenever I needed it; since I cannot use inline CSS, however, (I want @media rules), I’d still have to generate names in some way, and doing so randomly isn’t really viable for obvious reasons, unless I wanted to generate the CSS with the page itself, which I don’t want to do because of caching;

Really any suggestions that you might have or any insight that would help me with this would be much appreciated.

to post a comment
PHP

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@SBebbersFeb 01.2017 — I think you're approaching the problem the wrong way around. You say that you cannot use inline CSS but I can't think of an easy solution using that methodology that wouldn't use inline CSS.

To do this in a similar fashion to your example, your CSS_Rules class could look something like this:

[code=php]
<?php
class CSS_Rules
{
public $p;
// Other elements as required
public function __construct(){
$this->p = $this->getRules('p');
}

public function getRules(string $element = ''){
if(strlen($element) === 0){
return 'Please send a valid HTML element';
}
$returnVal = array(
'p' => "margin: 2px 8px; padding: 0; line-height: 1em; font-size: .8em;",
## Other elements as required
);
return $returnVal[$element];
}
}
[/code]

In your view, you could then do something like:
[code=php]
<?php require_once('CSS_Rules.php'); ?>
<?php $cssRules = new CSS_Rules(); ?>
<!DOCTYPE html>
<html>
<head>
....
<style type="text/css">
p{<?php echo $cssRules->p; ?>}
</style>
</head>
<body>
<div class="container">
<p>Hello Dave</p>
</div>
</body>
</html>
[/code]

However, it would be easier to learn a CSS pre-compiler like SASS or LESS, or just learn plain old CSS.

The above example assumes that the view and your CSS_Rules class exist in the same directory; otherwise, you'd have to get the correct path to your CSS_Rules class in the require_once(...) at the top of the view.

Regards,

Shaun.
Copy linkTweet thisAlerts:
@NogDogFeb 01.2017 — Yeah, in general, I feel like the actual CSS definition should be a stand-alone task, as I wouldn't want to be changing my application source code every time some stake-holder, designer, whatever decided some visual change was needed that did not affect the semantic structure of the HTML itself. While assigning classes and ID's to elements is useful to give the designer the necessary handles, I'd be reluctant to try to cook any actual styling into the server-side PHP code.
×

Success!

Help @ShiroAisu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...